Geeks With Blogs
Josh Reuben

So someone moved your Silverlight cheese? Go and get some HTML5 cheese!

Before WPF/E & Avalon were anything more than vapourware, W3C had the SVG standard(Scallable Vector Graphics) for 2D vector graphics over the web. Using Javascript, you could manipulate 2D animations & tranforms. You can embed SVG in HTML5 today.

Yeah, its like going back to Silverlight 1.0, but you just have to deal with it!

Embrace change.

·        Designed for 2D graphics - display vector graphics & text along with raster graphics 
·        Use XML (Unicode text) to describe vector graphics - can be searched & indexed, provides a standard for graphical data interchange
·        SVG 1.0 is aW3C standard, & & 2.0 is in the works
·        Powerful - can Manipulate the SVG DOM via XSLT and/or JavaScript on the client
·        The future direction of 2D GUI development that involves animations and transforms
·        a set of instructions for drawing a series of geometric shapes at a set of coordinates
·        Different from Raster graphics - Compressed bitmap of pixel RGB values - most display devices are raster - until SVG, browsers only supported raster graphics
·        self understanding objects rather than pixels - can dynamically change shape & color, allows text to be searchable
·        used in CAD, Adobe Illustrator, Adobe PostScript language & Macromedia Flash - but unlike these binary encoded formats, SVG is XML text, and is thus searchable, parseable & dynamic on the client side (not just event driven)
·        Scalability - scaled without a loss of image quality , unlike raster images, which require anti-aliasing. Graphics aren't limited by fixed pixels and can change size without distorting them - adjust to the available screen resolution à interoperability
·        File size - smaller than raster images, .SWF flash files, can be compressed to .svgz files --> less bandwidth consumption
·        Zoom functionality - viewer allows 4 magnification steps: x2, x4, x8, x16 -from the context menu, select zoom in, zoom out or original view - not available in traditional raster images
·        Panning functionality - hold down the alt key & left mouse button
·        Selective display of elements by setting an element's visibility attributeto "visible" or "hidden"
·        Open source code - just select view source !
·        International language support - based on Unicode & browser settings detection - don’t have to create a bitmap for each supported language
·        Accessible to search engines because it is text based - unlike raster images of text
·        Data driven graphics - use an XML datasource, SVG can be generated on the server or client
·        Resolution independent - image is rendered appropriate to the display device - no need to maintain multiple versions of a graphic for different devices
·        Rollovers are declarative - can do without JavaScript
SVG 2.0
·        The SVG 1.0 feature set with modular DTDs
·        DOM level 3 text events - allow an event listener to determine which key was pressed
·        Text wrapping - achieved via the element <flowText> & its subelements <flowRegion>, <flowDiv>, <flowPara> & <flowSpan>
·        Z-ordering- unlike SVG 1.0 which uses a fixed rendering order whereby the object that is last in the tree order will render topmost , SVG   could use CSS2 z-index style attribute
·        DOM Level 3 Load and save - access XML data on remote servers & use SAX to update the display - the XML is parsed into a new DOM tree, navigated & new nodes are created in the SVG graphic - implemented in Adobe SVG Viewer by the proprietary functions getURL, parseXML , & postURL
·        Vector filter affects - current filter affects require the target element to be rasterized before being applied, consuming allot of memory - vector filters take vectors as input & generate new vector data as output
·        Multiple namespace compatibility - ensure different APIs (e.g. MathML) can work together
·        Linking & synchronization of SMIL audio
·        W3C XHTML+MathML+SVG profile - combines namespaces enabling mixing & validating the standards via <xmlns> elements in the same document
·        width & height attributes defines the canvas size - both default to "100%"
·        The zoomAndPan attribute can be set to "enable" (default) or "disable"
·        The <title> element's content will be available to viewer title bar
·        The <desc> element is informational - can be applied to any SVG element as a subelement
·        A shape's location & size are part of its structure while color & style are part of its presentation
·        HTML5 allows embedding SVG directly using <svg>...</svg> tag anywhere in the body:
<svg xmlns="" width="100" height="100" >
<title> xxx </title>
<desc> xxx <desc>
·        The point 0,0 is upper left corner.
·        The viewport is the canvas area specified by the<svg> element  width & height attributes
·        units can be the following:
o   Px - pixels (default)
o   Em - the height of the letter x
o   Ex - default font character height
o   Pt - points (1/72 inch)
o   Pc -picas (1/6 inch)
o   Cm - centimeters
o   Mm - millimeters
o   In - inches
·        The <svg> element viewBox attribute defines the onscreen size of objects by defining a new coordinate system and provides a way to scale content - contains the min x-value, min y-value, the width & the height of a user defined coordinate system - e.g. viewBox="0 0 80 80" - note: height & width must both be positive
·        Viewport width & height are respectably defined as the 3rd minus 1st value & the 4th minus the 2nd value
·        To preserve the aspect ratio (of width to height) between the viewbox & the viewport, use the <svg> element preserveAspectRatio attribute - values can be various combinations of {xMin, xMid, xMax} and {yMin, yMid, yMax} plus 1 of 3 specifiers
·        E.g. xMinYMid = align viewbox min x with viewport left corner and align viewbox midpoint y value with viewport mid y value
·        The meet specifier will scale the graphic according to the smaller dimension so that the entire graphic fits into the viewport
·        The slice specifier will scale the graphic according to the larger dimension & cut off the parts that lie outside the viewport
·        The none specifier will stretch & squash the graphic to fit precisely in the viewport
·        E.g.
<svg      width="100"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 90 90" >
·        <svg> elements can be nested with the appropriate preserveAspectRatio attribute value in order to establish a new viewport & coordinate system at any time for different document fragments - can be transformed as a whole or imported into another SVG document using the <image> element (does not support nested animation)
·        As in HTML, the <a> element can contain a graphic & its xlink:href attribute can reference a URL, even that of another SVG file
·        xlink:href is defined in XLink namespace - SVG only supports outbound XLinks
·        Xlink is expressed in global attributes and provides both simple & extended links
·        Need to add the XLink namespace declaration to the <svg> element:
<svg ... xmlns:xlink="" >
·        To use a link in SVG, use an <a> element and enclose a <text> element with a style attribute that specifies "stroke:blue;" to signify a hyperlink:
<a xlink:href="..." target="new">
<text ... style="stroke:blue;" >
·        use the attribute value target="new" to open the link in a new window
·        Use XPointer links in a <use> element to enable reuse of elements defined in the <defs> element (provides fragment identification for generic XML documents & external parsed entities)
·        E.g. bare name XPointer:
<use xlink:href="#rectX" ... />
·        E.g. XPointer scheme:
<use xlink:href="#xpointer(id('rectX'))" ... />
·        An additional way to link is to specify an SVG <view> element that is referenced by a link
·        The <view> element has a Viewbox attribute and allows the user to select scaling or translation (a link enabled zooming or panning affect)
·        E.g.:
<view id="viewNormal" viewbox="0 0 100 100"/>
<view id="viewDouble" viewbox="0 0 50 50"/>
<view id="viewTriple" viewbox="0 0 33 33"/>
<view id="viewPanLeft" viewbox="100 0 100 100"/>
<view id="viewPanRight" viewbox="-100 0 100 100"/>
<a xlink:href="#viewNormal">
·        To control cursor appearance and have it appear as a hand, nest the object of interest within an <a> element whose xlink:href attribute has an empty string value
·        e.g.
<a xlink:href="">
·        cx, cy - specify the centerpoint of the circle
·        r -radius
·        rx, ry - radii for an eclipse 
·        E.g.
<circle cx="100" cy="100" r="20" style="..." />
·        x1, x2, y1,y2 - specify the endpoints of the line
·        E.g.
<line x1="0" y1="0" x2="100" y2="100" style="stroke: black;" />
·        x, y, width, height
·        x, y values default to 0,0
·        rx, ry - specify radius for rounded corners
·        Describes a shape created by a number of straight lines
·        Points attribute takes comma delimited pairs of x, y coordinates
·        It is best to set the style fill property to none
·        E.g.
<polyline points="10 25, 67 120, 45 89" style="stroke: black; fill:none;" />
·        Describes a closed multisided shape with straight edges
·        Points attribute takes comma delimited pairs of x, y coordinates
·        Unlike <polyline>, the shape is automatically closed
·        E.g.
<polyline points="10 25, 67 120, 45 89" style="stroke: black; fill:none;" />
·        A general element - compactly specify a path for an arbitrary shape as a sequence of lines & curves
·        Can be used to define the outline of a clipping area or a transparency mask
·        d attribute - signifies data to draw - entire path is contained in 1 attribute --> reduces bandwidth load, memory requirements of loading entire DOM structure into XML Parser - consists of 1 letter commands:
·        M - move to coordinates x, y (starts a new sub-path)
·        L - draw a line to coordinates x, y
·        A -draw an arc
·        Z - close path - draw a straight line back to the beginning point of the current sub-path
·        H - draw a horizontal line to an x axis position
·        V - draw a vertical line to a y axis position
·        A - arc - specify 7 arguments : x, y radius of the ellipse on which the points lie, the x-axis-rotation of the ellipse, the large-arc-flag (0 if the arc's measure is < 180 degrees or 1 if >= 180 degrees), sweep-flag (0 if the arc is drawn in the negative angle direction and 1 if the angle is drawn in the positive angle direction) & the endpoint x, y coordinates
·        Q - Quadratic Bezier curves - specified by a curve control point x, y coordinate (acts like a magnet whose proximity to the curve directly affects the magnitude of attraction) and the x, y coordinate of the endpoint (the start point is specified by the previous command) - multiple sets of (4 numbers each) control & endpoints can be specified after a Q command to generate a polybezier curve
·        T - smooth quadratic curve (continuation of the previous curve) - only specify the endpoint x, y coordinate, as the curve control point x, y coordinate is automatically reflected from the control point on the previous command relative to the current point (according to the formulas: x2 = 2 * x - x1; y2 = 2 * y - y1)
·        C - Cubic Bezier curves - more complex as they have 2 control points, one for each endpoint - specify 3 sets of coordinates: the control point for the start point, the control point for the end point & the end point
·        S - smooth cubic Bezier curve - (continuation of the previous curve) - only specify the endpoint control point x, y coordinate and the endpoint x, y coordinate, as the start point curve control point x, y coordinate is automatically reflected from the endpoint control point on the previous command relative to the current point
·        Note: uppercase command letters signify absolute coordinates, while lowercase command letters signify coordinates relative to the current pen position
·        Paths can be made shorter by placing multiple space delimited coordinates after a L command letter
·        E.g.
<path d="M 10 10 L 100 100 50 67 M 9 9 A 50 50 0 0 0 100 100 M 40 40 Q 20 60 70 90 T 50 50 C 20 20 40 40 50 50 S 70 70 60 60" style="stroke: black; fill:none;" />
·        Use to place shapes on a path - e.g. an arrow at the end
·        Multiple <marker> elements can be referenced by a <path> element
·        Does not display by itself - place in a <defs> element so that it can be used as a template
·        Considered part of the presentation, not the content - referenced in a <path> element style attribute using the marker-start, marker-mid (attached to every vortex in the path except for the 1st & last)  marker-end or marker property (all)- e.g.
·        Style="marker-start: url(#markerX); fill:none; stroke:black; "
·        Encloses a self contained graphic with its own private set of coordinates and other attributes
·        Attributes:
·        id
·        markerWidth, markerHeight
·        refX , refY - specify which marker point to align with the path (default = 0,0)
·        Orient - specify how the marker is to match the orientation of the path - in degrees or auto (default = 0)
·        markerUnits - if set to strokeWidth then the marker grows in proportion to the path's stroke width, if set to userSpaceOnUse then marker will remain the same irrespective of the stroke width
·        Viewbox
·        PreserveAspectRatio
·        E.g.
<marker id="markerX"
refX="5" refY="5"
<circle ... />
·        Make document more structured & understandable
·        Treat subelements as a referencable unit - via a unique id attribute
·        Any styles applied to a group will flow down to its subelements
·        While a nested <svg> element cannot be transformed, a nested <g> element can be
·        May be nested and may have its own <title> & <desc> elements
·        The transform attribute should not be applied - better to specify x, y coordinates in the calling <use> element
·        E.g.
<g id="g1" class="classX" >
<line x1="0" y1="0" x2="100" y2="100" style="stroke: black;" />
<line x1="50" y1="50" x2="150" y2="150" style="stroke: black;" />
·        Another way of grouping elements
·        Unlike <g>, Set as a template only (not automatically rendered)
·        Can specify viewbox and preserveAspectRatio attributes - <symbol> can fit into the viewport established by the <use> element
·        Utilize a template defined element
·        Repeat elements - copy & paste group elements
·        x, y attributes - specify coordinates
·        xlink:href attribute - specify the group to reuse. Note: can reference any valid file or URI - can place a set of common elements in one svg file & use them selectively in other svg files
·        Disadvantages: positioning is not absolute but relative to the original, the original style cannot be overridden, and both the original and the copy must appear in the document (the original does not act as a true template)
·        E.g.
<use xlink:href="#g1" x="50" y="50" />
<use xlink:href="xxx.svg#g1" x="50" y="50" />
·        Define the template elements
·        overcomes the disadvantages of <use>
·        Encloses all the original <group> elements - instructs SVG to define the groups as a template without displaying them --> SVG can process these groups more efficiently in a streaming environment
·        Note: applied in conjunction with <use> element , which references <group> elements as normal
·        Allows objects & code from non SVG namespaces (e.g. XHTML, SMIL) to be embedded in an SVG document
·        Consider placing an XHTML block of wrapable text within SVG (which cannot wrap text)
·        Possibly not supported in your browser of choice!
·        Causes a new viewport to be created with the following attributes: x, y, width , height , requiredExtensions
·        Creates a new viewport that imports an external image file
·        Can include an entire .svg or raster image .jpg or .png file
·        Attributes: x, y, width, height
·        Raster files are scaled to fit the rectangle, while vector images use the rectangle as a viewport
·        Doesn't support nested animation of SVG
·        E.g.
<image xlink:href="xxx.jpg" x= "60" y="30" width="50" height ="100" />


Posted on Wednesday, September 21, 2011 10:13 AM Graphics Programming | Back to top

Comments on this post: SVG - an introduction

# re: SVG - an introduction
Requesting Gravatar...
Now, it is very important to understand these elements in the project. - Dennis Wong YOR Health
Left by Mike Abbott on Jan 03, 2017 6:46 AM

Your comment:
 (will show your gravatar)

Copyright © JoshReuben | Powered by: