Styling SVG graphics

We continue to study SVG-graphics, this time we will touch on stylization.
First part: Introduction to SVG graphics .



Demo examples / Download source
')
Changing the appearance of SVG elements is similar to HTML, with some special features. For example, the background is assigned the fill property, not background-color, the border is the stroke instead of the border. If you have worked with Adobe Illustrator, this terminology will be familiar.




According to the official specifications of the SVG properties can be added directly to the tags. For example, fill and stroke for a rect element:

<svg> <rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/> </svg> 

You can also add properties as a style. In the example, the CSS3 transform property has been added to fill and stroke :

 <svg> <rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/> </svg> 

Since SVG is based on XML markup, the style in an .svg document needs to be enclosed in CDATA, otherwise the design will conflict with XML parsers. In the example, a hover effect is added:

 <style type="text/css" media="screen"> <![CDATA[ #internal rect { fill: slategrey; stroke: black; stroke-width: 3; -webkit-transition: all 350ms; } #internal rect:hover { fill: green; } ]]> </style> 

In a .svg document, external styles are connected a little differently:

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

SVG elements can be grouped with the g tag, then you can apply common styles:

 <g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="203" width="200" height="200"/> <circle cx="120" cy="106" r="100"/> </g> 

That's all the highlights of SVG styling. Bonus some useful fiction:

• Official Style Information at w3.org
• Good examples on blog alignedleft.com
• Original examples at hongkiat.com