Styling with SVG

Since the CSS specification itself is inadequate to handle the complexities and specific requirements of styling images, SVG includes a number of style extensions.

SVG style property/value pairs may be presented directly within the content of the markup as attributes. At the same time, SVG style properties may be treated as part of style sheets in the same way CSS works.

Here are some more property options to help you code your next work of art, along with a brief description of the intent of each property’s function:

1. alignment-baseline: A text property that specifies alignment with respect to its parent element.

2. baseline-shift: Repositions the baseline of text relative to its parent element, usually resulting in a subscript or superscript effect.

3. clip-path: Points a URI to another SVG graphic to be used as a clipping path. This can be an ID reference (such as #someClippingPath) if the SVG is embedded within the same document.

4. clip-rule: Takes one of three values: inherit, evenodd, or nonzero (default). Without getting too deep into the details, imagine two concentric circles, with a clip-rule applied to the outermost circle. With nonzero, both circles would be filled. With evenodd, the inner circle would not be filled, resulting in an annulus.

5. color-interpolation: Specifies which color space interpolation should occur in, with auto, sRGB (default), and linearRGB as possible values.

6. color-interpolation-filters: Similar to color-interpolation but applied to filter effects.

7. color-profile: Defines a color profile description. Can be used like an at-rule (@color-profile) or as a property.

8. color-rendering: Tells the user agent to optimize speed or quality using the optimizeSpeed or optimizeQuality property.

9. dominant-baseline: In typography, used to determine the baseline of the script with the dominant run. Values could be alphabetic for Western contexts, mathematical for math formulas, and ideographic for the East Asian scripts Chinese, Japanese, Korean, and Vietnamese.

10. enable-background: Describes how backgrounds are accumulated, using the property new or accumulate, or an x/y offset value.

11. fill: Paints the interior of a given element.

12. fill-opacity: Sets the opacity of the fill color.

13. fill-rule: Similar to clip-rule, using evenodd or nonzero (default) to set the fill behavior.

14. filter: Can set a URL to point to a filter that would be applied to an object.

15. flood-color: Indicates a color value to use to flood a filter subregion.

16. flood-opacity: Sets an opacity value to flood a filter subregion.

17. glyph-orientation-horizontal: Controls glyph orientation when the inline-progression direction (set by writing-mode) is vertical relative to the reference orientation.

18. glyph-orientation-vertical: Controls glyph orientation when the inline-progression-direction (set by writing-mode) is horizontal relative to the reference orientation.

19. image-rendering: Tells the user agent to optimize speed or quality using the optimizeSpeed or optimizeQaulity property. (Look at color-rendering.)

20. kerning: Adjusts length between glyphs.

21. lighting-color: Defines a color for light sources that can be applied against SVG’s and elements.

22. marker: Shorthand property for marker-end, marker-start, and marker-mid.

23. marker-end: Defines a marker or an arrow at the end of a path.

24. marker-mid: Defines markers at all vertices except for the beginning and end markers.

25. marker-start: Defines a marker or an arrow at the beginning of a path.

26. mask: References a element to implement a path used for generating a mask effect.

27. opacity: Sets the opacity of an object, using decimal values from 0 (fully transparent) to 1 (fully opaque). A value of 0.5 would be 50 percent opacity.

28. pointer-event: Controls under what circumstances an object can become the target of pointer events.

29. shape-rendering: Tells the user agent to optimize speed or quality using the optimizeSpeed or crispEdges property.

30. stop-color: Sets a color to use at a gradient stop.

31. stop-opacity: Sets an opacity used at a gradient stop.

32. stroke: Describes the stroke effect applied to an object.

33. stroke-dasharray: Sets pattern of dashes and gaps in a stroke.

34. stroke-dashoffset: Sets how far into a stroke the dash pattern will begin.

35. stroke-linecap: Sets the shape used at the end of open subpaths, using the values butt, round, and square.

36. stroke-linejoin: Sets the shape of corners, using the values miter, round, and bevel.

37. stroke-miterlimit: Sets a limit on the ratio of the miter length to stroke-width.

38. stroke-opacity: Sets the opacity of the stroke.

39. stroke-width: Sets the width of a stroke.

40. text-anchor: Aligns text to a specified point, using the values start, middle, and end.

41. text-rendering: Tells the user agent to optimize speed or quality using the optimizeSpeed or optimizeLegibility property.

42. writing-mode: Determines which direction text flows; left to right, right to left, and/or top to bottom.

Browser Support

SVG enjoys at least partial native support in modern versions of Gecko-based browsers such as Firefox, WebKit-based browsers such as Safari, and the Opera line of browsers since version 8. As you probably guessed, there are no versions of Microsoft Internet Explorer, including version 8, that support SVG.

SVG and Microsoft Internet Explorer

Fortunately for the IE users, there are excellent plug-ins that provide support for SVG.

As of 19 March 2009, Internet Explorer 8, the latest release of Windows Internet Explorer, is the only current major browser not to provide native SVG support. Internet Explorer requires a plug-in to render SVG content. There are a number of plug-ins available to assist including:

1. Adobe SVG Viewer from Adobe Systems plugin supports most of SVG 1.0/1.1. Zooming and panning of the image are also supported to enable viewing of any area of the SVG lying outside the visible area of its containing window, but scrolling is not supported. Adobe SVG Viewer is available for download from Adobe Systems free of charge. So, on 1 January 2009, Adobe Systems discontinued support for Adobe SVG Viewer. However, their motivations for discontinuing support included the fact that better options existed in the marketplace and that most browser vendors (save for the one big one) already feature native support for SVG.

2. Google Chrome Frame from Google can support all web elements supported by Webkit, including SVG 1.0 and partially SVG 1.1.

3. RENESIS Player 1.0 for Internet Explorer from examotion GmbH, first released on April 2008, supports SVG 1.1 on IE 6.x and 7.x and is available for download free of charge.

4. Ssrc SVG Plugin from Savarese Software Research Corporation is a plug-in for rendering SVG in Microsoft Internet Explorer (MSIE) versions 6, 7, and 8 on Windows XP, Server 2003, Vista, and Server 2008. In addition, the plug-in enables Internet Explorer to load Mozilla XUL applications.

5. Corel SVG Viewer.

6. Batik, a widely deployed Java plugin.

7. Bitflash, an SVG viewer intended for mobile devices, which can be installed as an IE plugin.

8. Ikivo, an SVG viewer intended for mobile devices, which can be installed as an IE plugin.

9. GPAC, targets SVGT 1.2.

Related Resources

W3C – Scalable Vector Graphics (SVG)

W3C – Scalable Vector Graphics (SVG) 1.1 Specification

SVGweb SVG Web is a JavaScript library for Web developers, targeted at Internet Explorer and dependent on the presence of an installed Adobe Flash plugin on the client machine. SVG Web provides partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting.

SVG.org – Bringing the SVG Community Together

Planet SVG

Mozilla SVG Project

Google to slip SVG into Internet Explorer