/Web APIs

SVGStyleElement: title property

The SVGStyleElement.title property is a string corresponding to the title attribute of the given SVG style element. It may be used to select between alternate style sheets.


A string with any value.

The value is initialized with the string specified in the corresponding style's title attribute.


This example demonstrates programmatically getting and setting the title property on a style that was defined in an SVG definition.


The HTML contains an SVG definition for a <circle> with a <style> element that has a title. We also define a text area for logging the current title.

<textarea id="log" rows="3" cols="50"></textarea>
  <style title="gold fill style">
    circle {
      fill: gold;
  <circle cx="50" cy="40" r="25" />


The code below gets the style element (an SVGStyleElement) using its tag name, logs the title, then changes and logs the title again.

const log = document.getElementById("log");

const svg = document.querySelector("svg");
const style = svg.querySelector("style");
log.value = `Initial title: ${style.title}\n`;
style.title = "Altered Title";
log.value += `New title: ${style.title}`;


The text in the log below shows that the title initially reflects the matching attribute on the <style> element, but can then be changed to another value.

Note that alternate styles are not applied by default; they must be selected as the preferred stylesheet by the user. To apply the alternate stylesheets on Firefox:

  1. Open the Menu Bar (Press F10 or tap the Alt key)
  2. Open View > Page Style submenu
  3. Select the stylesheets based on their names.


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
title 1 12 1.5 9 ≤12.1 3 3 18 4 ≤12.1 1 1.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.