AzureDays

SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

You can find an overview of SVG in our previous post. In this section, you’ll learn about Basic Shapes, Path, Text, and Fonts.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

The most recent browser versions support most of SVG 1.1.

Basic Shapes

SVG contains the following set of basic shape elements:

• rectangles (including optional rounded corners), created with the ‘rect’ element,
• circles, created with the ‘circle’ element,
• ellipses, created with the ‘ellipse’ element,
• straight lines, created with the ‘line’ element,
• polylines, created with the ‘polyline’ element, and
• polygons, created with the ‘polygon’ element.

These shape elements are equivalent to a ‘path’ element that would construct the same shape. More on path in a section that follows.

Let’s start with a couple rectangles.

Which renders this:

The viewport assumes that we are using browser pixels as our coordinate system and the height and width are set. The first rect assumes x=”0″ and y=”0″ and we can set the width and height. In the second rect, we set the x. The fill, stroke, and stroke-width are set in the rect element in this case.

Here is an example of several shapes. 

This will display each element from the rectangle, the first element to be the lowest in the drawing.

The points represent the corners of the polyline and polygon. The points are X,Y coordinates and are separated by spaces. The polygon is the red triangle.

More information about how to set the coordinates and how to draw the basic shapes, see Basic Shapes in the SVG spec.

Text and Path

You can add text to your SVG document.

The path element is used to define a drawing path. The following commands are available for path data:

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

Note: All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.<

Produces

And you can write text along the path with code that looks like this:

The preceding code is rendered like this:

The code demonstrates how you can use the following tags:

• defs and use are a way you can reuse elements. You can define the element using the id attribute. The use element then identifies the element you want to reuse. You designate the item with the xlink:href attribute that points to the CSS selector for the element you want to resuse.
• desc is used to describe an element. You read the element programmatically to analyze SVG.

Some additional notes on text.

• SVG’s ‘text’ elements are rendered like other graphics elements. Thus, coordinate system transformations, painting, clipping and masking features apply to ‘text’ elements in the same way as they apply to shapes such as paths and rectangles.
• Each ‘text’ element causes a single string of text to be rendered. SVG performs no automatic line breaking or word wrapping.
• Within a ‘text’ element, text and font properties and the current text position can be adjusted with absolute or relative coordinate values by including a ‘tspan’ element. So putting a bold into a text string might looks like this:

• You can rotate the string of text or whatever you put into your tspan each individual character.
• SVG supports various international writing directions, such as left-to-right (e.g., Latin scripts) and bidirectional (e.g., Hebrew or Arabic) and vertical (e.g., Asian scripts).
• Font selection, such as font-family, font-style and such, are the same as you would use in CSS2.
• You can even specify kerning in SVG.

For the details on each of these, see the SVG spec on Text. You will find all of the details along with examples.

Fonts

Often, if you are using SVG, you want to provide a particular look, which often includes special fonts. There are several ways of dealing with fonts in SVG.

In SVG you can use fonts that are already installed on the use’s computer or those you can access over the Web. But not all features work in all browsers.

Web-safe Fonts

Use web-safe fonts, just like you do in CSS2. For example,

For more information, see Font selection properties in the SVG Spec.

Font-face

Or you can use @font-face CSS declaration to specify your font. Here is an example:

Every major browser now supports @font-face rendering with either TrueType, OpenType or WOFF format fonts (or even all of them).

SVG Fonts

But if you want to guarantee a particular font exists, you may want to use SVG Fonts. SVG Fonts are meant to be read-only. And you will need a special tool to convert your licensed font into an SVG Font.

For more information on SVG Fonts, see SVG Fonts: How To. Also note, that SVG Fonts did not seem to work in IE10 and support in Firefox has have been postponed indefinitely.

Painting

There are several examples of fill and stroke in the previous sections. But there are several properties that you can use when you paint objects.

‘path’ elements, ‘text’ elements and basic shapes can be:

• fill (which means painting the interior of the object)
• stroke (which means painting along the outline of the object).

Filling and stroking both can be thought of in more general terms as painting operations.

• The ‘fill’ property paints the interior of the given graphical element.
• The ‘fill-rule’ property indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape.
• ‘fill-opacity’ specifies the opacity of the painting operation used to paint the interior the current object.
• The ‘stroke’ property paints along the outline of the given graphical element.
• stroke-width specifies the width of the stroke on the current object.
• ‘stroke-linecap’ specifies the shape to be used at the end of open subpaths when they are stroked.
• ‘stroke-linejoin’ specifies the shape to be used at the corners of paths or basic shapes
• ‘display’ and ‘visibility’, to control the visibility of graphical elements.
• A marker is a symbol which is attached to one or more vertices of ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements. For example, you will use a marker to build arrows.

For more information, see Painting: Filling, Stroking and Marker Symbols in the SVG Spec.

Sample Code

Sample code is available in the DevDays GitHub repository. See https://github.com/devdays/html5-tutorials