HTML-5.

com HTML <svg> - Scalable Vector Graphics

2011 Accilent Corp. Page 1 of 4 1
HTML <svg> - Scalable Vector Graphics
#svg# for drawing Scalable Vector Graphics. #svg# description, syntax, usage, attributes
and examples. HTML-5.com is a great guide for web developers. TV Series & Actors and
Actresses. Follow TV Series and HTML 5 on Google+.
HTML-5.com itemscopehttp://data-vocabulary.org/Breadcrumb<span
itemprop="title">HTML 5</span> itemscopehttp://data-vocabulary.org/Breadcrumb<span
itemprop="title">HTML Tags</span> itemscopehttp://data-vocabulary.org/Breadcrumb
HTML <svg> - Scalable Vector Graphics
itemscopehttp://data-vocabulary.org/Breadcrumb<span itemprop="title">Examples</
span>
The <svg> Tag in HTML 5
The <svg> tag can be used to draw pictures and/or text using SVG. The demo below uses
two different methods to draw a sphere with a glow graident. The larger red ornament is
created using a circle with a separate glow gradient. The smaller blue ornament and its glow
are created with a single radial gradient in a rectangle (however, the anti-aliasing is not as
good and the color with zero opacity may not be completely transparent in some browsers,
which makes the drawing rectangle visible).
^
This is an actual working demo of the SVG example code below. (Do View Source to verify
that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using
the HTML Validator. Try using it to validate URLs with HTML examples from other places
that claim to be HTML 5 web sites!)
Another way to create a glow graident on an object is shown in the <canvas> tag demo.
However, that page currently causes the Firefox 3.6.12 browser to hang.
HTML <svg> - Scalable Vector Graphics HTML-5.com
2 Page 2 of 4 2011 Accilent Corp.
back to top
<svg> Tag Syntax
Rules for coding the HTML svg element
back to top
SVG Tag Attributes
Attributes of the SVG tags
global attributes The common HTML attributes can be used
on any of the SVG tags.
Attributes of the <svg> tag
preserveAspectRatio
style
version
viewbox
xmlns="http://www.w3.org/2000/
svg"
The xmlns attribute declares the
namespace for all of the SVG elements.
Since the xmlns attribute is inherited by
child elements and descendants, it does
not need to be coded on other tags in the
content of the svg element, unless they are
in a different namespace such as the HTML
namespace.
Attributes of the <circle> tag
cx,
cy
center
r radius
Attributes of the <linearGradient> tag
x1,
y1
x2,
y2
Attributes of the <radialGradient> tag
fx,
fy
r
spreadMethod
HTML-5.com HTML <svg> - Scalable Vector Graphics
2011 Accilent Corp. Page 3 of 4 3
Attributes of the <rect> tag
x,
y
width,
height
Attributes of the <stop> tag
offset
style stop-color:
stop-opacity:
back to top
SVG Examples
Examples of the <svg> tag in HTML 5
SVG Christmas Tree Ornaments
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
style="width:400px; height:300px"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid slice"
>
<defs>
<linearGradient id="green-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color: #99ff99"/>
<stop offset="100%" style="stop-color: #003300"/>
</linearGradient>
<linearGradient id="red-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #ff0000"/>
<stop offset="50%" style="stop-color: #990000"/>
<stop offset="100%" style="stop-color: #990000"/>
</linearGradient>
<radialGradient id="radial-glow-gradient" fx="40%" fy="40%" r="55%"
spreadMethod="pad">
<stop offset="0%" style="stop-color: #ffffff; stop-opacity: 0.7"/>
<stop offset="100%" style="stop-color: #ffffff; stop-opacity: 0.01"/>
</radialGradient>
<radialGradient id="radial-gradient" fx="35%" fy="25%" r="49%"
spreadMethod="pad">
<stop offset="0%" style="stop-color: #ccccff; stop-opacity: 1.0"/>
<stop offset="99%" style="stop-color: #0033ff; stop-opacity: 1.0"/>
<stop offset="100%" style="stop-color: #66cc66; stop-opacity: 0.0"/>
</radialGradient>
</defs>
<rect x="0" y="0" width="100" height="100" style="fill:
url(#green-gradient)"/>
<circle cx="25" cy="65" r="15" style="fill: url(#red-gradient)"/>
<circle cx="20" cy="58" r="6" style="opacity: 0.0; fill:
url(#radial-glow-gradient)"
<animate attributeType="CSS" attributeName="opacity"
from="0.0" to="1.0" begin="5s" dur="8s" fill="freeze"/>
</circle>
<line x1="25" y1="36" x2="22" y2="47" style="stroke: #000000;
stroke-width:1"/>
HTML <svg> - Scalable Vector Graphics HTML-5.com
4 Page 4 of 4 2011 Accilent Corp.
<line x1="25" y1="36" x2="28" y2="47" style="stroke: #000000;
stroke-width:1"/>
<rect x="20" y="46" width="10" height="5" style="fill: #ffff00"/>
<rect x="40" y="25" width="20" height="20" style="fill: url(#radial-gradient)"
<animate attributeType="CSS" attributeName="opacity"
from="0.0" to="1.0" begin="0s" dur="4s" fill="freeze"/>
</rect>
<text x="145" y="27" transform="scale(.33, 1.0)"
style="fill:#000000;">^</text>
<rect x="46" y="22" width="8" height="4" style="fill: #ffff00"/>
</svg>
The large red ornament is created using an SVG <circle> tag with a separate circular
glow gradient. Its "ornament hanger" is created with two SVG <line> tags. The animation
causes the glow gradient to appear slowly. Since the animation starts after a five second
delay ( begin="5s"), the style on the circle must include opacity: 0.0, which
matches the from attribute on the <animate tag; otherwise the glow would suddenly
disappear when the animation starts.
The smaller blue ornament is created with more minimal code. The ornament ball and its
glow are created with a single radial gradient in a rectangle. Its ornament hook is actually
a scaled text caret character ( ^). Since the animation applies to the rectangle, the whole
ornament slowly appears.
back to top
Changes in HTML 5 - <svg> Tag
What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML
Other caveats
Currently only Opera supports the <link rel="icon"> favorites icon using SVG.
back to top
THE END