home

HTML5 SVG

SVG = Scalable vector graphics and it is an XML language, similar to XHTML, which can be used to draw graphics gradients and custom shapes, lines and more. The SVG specification is an open standard developed by the W3C (World Wide Web Consortium) since 1999.

Beginning struggles

SVG has been in development since 1999 by a group of companies within the W3C after the competing standards Precision Graphics Markup Language (PGML, developed from Adobes PostScript) and Vector Markup Language (VML, developed from Microsofts RTF) were submitted to W3C in 1998. SVG drew on experience from the designs of both those formats.

SVG allows three types graphics vector graphics and raster and text graphics.

Why SVG?

<Paths>
<Shapes>
<Text>
<Gradients Patterns>
<Animations and Effects>

SVG can create a different type of objects like Pictures, Paths, Gradients and patterns, Shapes, Text, and more.

SVG Paths

Path elements use to create a path of the object. With additional paths can be used to create smooth flowing lines using a relatively few number of control points. Similar looking effects can be created using just the polyline element, but you have to use a lot of points to create a smooth looking effect, and it still won't scale well at larger sizes. So a good understanding of paths is important when drawing SVG. Creating complex paths using an XML editor or text editor still is not easy, but having an understanding of how they work can make it bearable.

Check the below following list of the methods to create a path.

<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" stroke="#000000" stroke-width="3" Fill="red"/>
Sorry, your browser does not support inline SVG.
</svg>

SVG Shapes

Straight-line paths and paths made up of a series of connected straight-line segments (polylines), as well as closed polygons, circles and ellipses can be drawn. Rectangles and round-cornered rectangles are also standard elements.

<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>

SVG Text

<text>element is use to create text object. Check the following example code.

<svg height="150" width="200">
  <text x="0" y="15" fill="red">This SVG Text Example</text>
<text x="0" y="45" fill="red" transform="rotate(20 20,40)">Rotate SVG Example</text>
<a xlink:href="http://www.ustutorials.com/" target="_blank"> <text x="0" y="85" fill="blue">Link SVG!</text> </a>
</svg>
This SVG Text Example Rotate SVG Example Link SVG!

SVG Gradients Patterns

A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.

There are two types of gradients are there:

1) Linear Gradient
2)Radial Gradient

SVG Path Demo

SVG Linear Gradient

Check the following below Linear Gradient example code, # indicates id (Gradient)

<svg width="120" height="240">
<defs>
<linearGradient id="Gradient">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient >
</defs> <rect x="20" y="20" rx="25" ry="25" width="100" height="100" fill="url(#Gradient)"/> </svg>

SVG Radial Gradient

Check the following below Radial Gradient example code, # indicates id (Gradient)

<svg width="120" height="240">
<defs>
<radialGradient id="Gradient">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient >
</defs> <rect x="20" y="20" rx="25" ry="25" width="100" height="100" fill="url(#Gradient)"/> </svg>

SVG Animations and Effects

This is simple blur effect with using blur property(feGaussianBlur)

SVG Blur Effect Code

<svg height="110" width="110">
  <defs>
<filter id="f1" x="0" y="0">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="blue" stroke-width="3" fill="red" filter="url(#f1)" />
</svg>