How To Use Styles With SVG

SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. SVG shares many of its styling properties with using CSS and XSL style sheets. Except for any additional SVG-specific rules explicitly mentioned in the specification, the general definition of SVG properties can be shared with CSS and XSL.

Table of Contents

Styling with XSL

XSL style sheets define how to transform XML content into something else, usually other XML. XSL style sheets will take non-SVG content as input and generate SVG content as output.

The following example uses an external XSL style sheet that has been saved in a file named “xsl_style.xsl”. The style sheet sets the ‘fill’, ‘stroke’, ‘stroke-width’ and ‘fill-opacity’ properties on an ellipse to green, red, 2 and 0.6 respectively.

<?xml version=”1.0″?>
<xsl:stylesheet version=”1.0″
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:svg=”http://www.w3.org/2000/svg”>

<xsl:template match=”/svg:svg”>
<xsl:copy>
<xsl:copy-of select=”@*”/>
<xsl:attribute name=”version”>1.1</xsl:attribute>
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>

<xsl:template match=”svg:ellipse”>
<xsl:copy>
<xsl:copy-of select=”@*”/>
<xsl:attribute name=”fill”>green</xsl:attribute>
<xsl:attribute name=”stroke”>red</xsl:attribute>
<xsl:attribute name=”stroke-width”>2</xsl:attribute>
<xsl:attribute name=”fill-opacity”>0.6</xsl:attribute>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>

The following example shows the use of an external XSL style sheet on SVG file, which has been saved in a file named “ellipse.svg”.

<?xml version=”1.0″?>
<?xml-stylesheet href=”xsl_style.xsl” type=”text/xsl”?>
<svg xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”150″ cy=”75″ rx=”95″ ry=”55″/>
</svg>

Styling with CSS

SVG allows you specify presentation styles of a graphic using CSS in four ways, which are with inline styles, internal stylesheets, external stylesheets. SVG implementations that support CSS are required to support the following.

Inline Styles

Inline style is exactly the way setting the value of the style attribute to a series of visual properties and their values. It includes CSS property declarations within a style attribute on a particular SVG element.

Following an example of uses of inline styles within SVG using style attribute.

<svg xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″ style=”stroke: brown; stroke-width: 2; fill:
lime; fill-opacity: 0.5″ />
</svg>

Internal Stylesheets

In internal style sheet, you don’t need to place your styles inside each SVG element, instead you can create an internal style sheet to collect commonly-used styles that you can apply to all occurrences of a particular element, or you can use as named classes to apply to individual elements.

Following is an example which sets up an internal style sheet that will draw a polygon in a blue stroke with a light yellow interior and dashed stroke line. Here the style sheet have been placed within a <defs> element.

<svg xmlns=”http://www.w3.org/2000/svg”>
<defs>
<style type=”text/css”><![CDATA[
polygon {
fill: #ffc;
stroke: blue;
stroke-width: 2;
stroke-dasharray: 5 3;
stroke-linejoin:miter;
stroke-opacity:0.7
}
]]></style>
</defs>
<polygon points=”140,10 125,65 80,75 125,95 140,145 150,95 195,75 150,65″/>
</svg>

External Style sheets

Another way of styling SVG content is using external style sheets, if you want to apply a set of styles to multiple SVG documents, you can use external style sheets on SVG document. The difference between internal and external style sheet is that in internal style sheet we use CSS code within same file while in external style sheet we write the CSS code in separate file and use this file on SVG document. Internal style sheet is impractical for a large volume of documents if you ever need to make a global change to all the documents.

Following is an example which shows an external style sheet that has been saved in a file named “style1.css” will set the ‘fill’, ‘fill-opacity’,’stroke’ and ‘stroke-width’ properties on rectangle to pink, 0.6, green and 4 respectively.

rect {
fill: pink;
fill-opacity:0.6;
stroke: green;
stroke-width: 4
}

The following example shows the use of an external CSS style sheet on SVG file has been saved in a file named “rectangle.svg”.

<?xml version=”1.0″?>
<?xml-stylesheet href=”style1.css” type=”text/css”?>
<svg xmlns=”http://www.w3.org/2000/svg”>
<rect width=”300″ height=”150″/>
</svg>

Styling with Presentation Attributes

Using presentation attributes are also another ways of styling SVG elements. With presentation attributes in SVG ,instead of using style attribute to style SVG graphic element, you can write each of the properties as an attribute. For more detail about SVG presentation attributes visit:”How To Use Presentation Attributes in SVG“

Please follow and like us: