SVG CSS Styles

We can use CSS to set the style of SVG shapes. Style refers to changing the appearance of the shape. This can be the line color and width, fill color, opacity, and many other properties of the shape.

There are6These styles can set the shapes in SVG images. Each will be introduced in this article. At the end of this article, you will find a list of CSS properties that can be used with SVG.

Using CSS style properties

Can specific style properties (such as stroke and fill) be used to style SVG shapes. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<circle　cx="40"　cy="40"　r="24"　stroke="#000000"　fill="#00ff00"　/>
</svg>

Although there is a series of available style properties. However, it is recommended that you use inline style sheets or external style sheets, so I will not go into detail about style properties here.

Using style attribute and CSS properties

This method does not use any style-specific attributes. Instead, it only uses the style attribute and specifies CSS properties within it. If you need to embed styles directly in the style, this method is preferable to specific properties because you can learn the names of CSS properties. CSS properties in internal or external style sheets are the same, so copying and pasting and learning such content is easier.

This is a circle that sets the outline and fill by using the style attribute and CSS properties:

<svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="40"　cy="40"　r="24"　style="stroke:　#000000;　fill:#00ff00;"　/></svg>

Using inline style sheets

You can define the style of shapes in an embedded style sheet and then automatically apply all these styles to the shapes. Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style type="text/css" >
　　　　　　<![CDATA[
　　　　　　　　circle　{
　　　　　　　　　　　stroke:　#006600;
　　　　　　　　　　　fill: #00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle　　cx="40"　cy="40"　r="24"/>
</svg>

Pay attention to how to define the style of the circle element within the <style> element. This works in the same way as in HTML and CSS.

Internal style sheets in Internet Explorer 7and Firefox 3.0.5They all work normally.

The effect is as follows:

class attribute

You can use the properties of the shape in the class to select the style of the shape, rather than applying the style to all shapes of a specific type (such as all circles). Just like the class attribute is used in HTML elements.

Here is an example of two circle styles-Green and red. <circle> uses the following class attributes to apply each of the two styles to their respective elements:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style type="text/css" >
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen {
　　　　　　　　　　　stroke:　#006600;
　　　　　　　　　　　fill: #00cc00;
　　　　　　　　}
　　　　　　　circle.myRed {
　　　　　　　stroke: #660000;
　　　　　　　fill: #cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle class="myGreen" cx="40"　cy="40" r="24"/>
　　　　<circle class="myRed" cx="40"　cy="100"　r="24"/>
</svg>

Note: The selector name in the style sheet, such as .myGreen and suffix .myRed, for circle. Now, the <circle> element can use class="myGreen" to define a green circle style or class="myRed" to define a red circle style.

Use external style sheets

When using external style sheets, the style sheet is placed in a separate file and then placed on the web server, just like the external CSS file of an HTML page. In addition, you need to include the following declaration before the <svg> element in the SVG file:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>

This processing instruction tells the SVG viewer to use the CSS style sheet to find the file “svg-stylesheet.css”.

This is an example of a declaration used in SVG files:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24"
　　　　　　　style="stroke:#006600; fill:#00cc00"/>
</svg>

Note: External CSS style sheets in Internet Explorer 7it seems to work normally, but in Firefox 3.0.5It cannot be used.

Use style sheets in HTML pages.

If SVG images are embedded in HTML pages, the style sheet of SVG images can also be embedded in HTML pages. Here is an example:

<html>
<body>
<style>
</style>
<svg>
</svg>
</body>
</html>

To add styles to shapes within an SVG image, simply add regular CSS properties within the style element. You can use the CSS selectors commonly used in HTML to set the styles of SVG elements. This is an HTML page where the circle element is styled using the CSS style sheet within the HTML page:

<html>
<body>
<style>
　　circle　{
　　　　　stroke:　#006600;
　　　　　fill　　:　#00cc00;
　　}
</style>
<svg>
　　<circle　cx="40"　cy="40"　r="24"　/>
</svg>
</body>
</html>

If the SVG image is directly embedded in the HTML page, this may be the simplest method to set the SVG shape style.

Locally overriding style sheets in shapes

If the style has already been set in the style sheet, this style can be overridden by locally setting new style properties within the shape to be styled. Styles locally set within the shape always take precedence over styles defined in internal or external style sheets.

SVG CSS properties

SVG elements have the following CSS properties that can be set. Not all elements have all these CSS properties. Therefore, CSS properties are divided into multiple tables for different elements.

Shape CSS properties

CSS properties of the path element and other shape elements:

Text CSS Attributes

CSS Attributes of the text element:

Gradient CSS Attribute

SVG Gradient CSS Attributes: