# Use CSS

# .style object for inline style

You can define the style for every SVG element with the .style() method and .style object. You can use .style() to add an inline style as a string.

You can use the .style object to access its child properties as methods. Its properties are now methods with the same name as the original property name:

If you need to get any style property value, you can use the method without parameter and returns the current style value:

const stroke = element.style.stroke();


Many SVG attributes are visuals and can also be used as properties CSS, so in gySVG, you can choose to use .stroke_width() or .style.strokeWidth().

# style element

It's possible to create a style tag into the SVG and put CSS rules into this.

const sheet = svg.add('style');

The easiest way for create the style content is use the method .content() and pass as parameter the string with all CSS rules:


The styles defined in the SVG affect the entire page, and collisions and side effects may occur if the selectors used to coincide with other elements.

# .classList object

You can manage the class list element with the .classList object and its methods:

  • .classList.contains( class ) - returns true if the list contains the given class, otherwise false.
  • .classList.add( class ) - adds the specified class.
  • .classList.remove( class ) - removes the specified class.
  • .classList.replace( oldClass, newClass) - replaces oldClass with newClass.
  • .classList.toggle( class ) - removes class from if it exists or adds class if it doesn't.