The SVG stands for Scalar Vector Graphics. It is a W3C recommendation used to embed vector based graphics to an XML file. The elements and attributes of the SVG files can be animated and they do not lose quality when zoomed or resized. SVG can be created and edited with any text editor. It can be viewed in any browser with plug-in or any special viewer. They can be scaled, searched, indexed, printed, zoomed, scripted and compressed. The latest version of SVG is SVG 1.1 recommended on 2011. It is compliant with XSL and DOM.

SVG files have extension as .svg.

SVG can be used from XML using XSL translator. The XML extension languages like XLink, XPointer, DOM, XSL, CSS2 can be used on SVG documents. SVG has some predefined shapes such as rectangle, circle, ellipse, polygon, line …etc which can be used in the a SVG file. The text and stroke properties can be used to define text and lines respectively. SVG has filters for manipulating images. User can do blur, combine, merge and manipulate colors and lighting, etc… operations on the images.

NOTE: Learn more about HTML5 SVG element here...

SVG can be applied to XML and viewed with XSLT style or can be converted to XHTML or HTML and viewed.

The example below shows the blur effect on a square with the text taken from XML document.

Example of XML and SVG blur effect on a square

demographics.xml

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet href="demoGraphics.xsl" type="text/xsl"?>

 

<root>

      <wishes>   

      <text>Happy Birthday!</text>

      <text>Have a good life!</text>

      <text>Dreams come true!</text>

      <text>Live Long!!</text>

      </wishes>

</root>

The style for the XML document is taken from the XSLT demoGraphics.xsl.

demographics.xsl

<?xml version="1.0"?>

<xsl:stylesheet version="1.0"

            xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

            xmlns="http://www.w3.org/2000/svg"

  >

  <xsl:output

      method="xml"

      indent="yes"

      standalone="no"

      doctype-public="-//W3C//DTD SVG 1.1//EN"

      doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"

      media-type="image/svg" />

       

      <xsl:template match="/">

        <xsl:apply-templates/>

    </xsl:template>

 

  <xsl:template match="wishes">

    <svg height="700" width="700" xmlns="http://www.w3.org/2000/svg">

            <defs>

                  <filter id="mySQ" x="0" y="0">

                        <feGaussianBlur in="SourceGraphic" stdDeviation="15" />

                  </filter>

            </defs>

            <rect width="600" height="600" stroke="blue" stroke-width="10" fill="grey"  filter="url(#mySQ)" />

            <xsl:for-each select="/root/wishes">

                  <text font-size="20" fill="black" x="40" y="80" transform="rotate(30 60, 30)">           

                        <xsl:value-of select="."/>      

                  </text>

            </xsl:for-each>

    </svg>

  </xsl:template>

</xsl:stylesheet>

When the XML is viewed in the browser, the XML data is displayed with style defined in the XSLT.

 

›› go to examples ››