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
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
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
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“
Comments are closed.