SVG is short for Scalable Vector Graphics. It is a graphic format in which the shapes are specified in XML. The XML is then rendered by an SVG viewer. Today most web browser can display SVG just like they can display PNG, GIF, and JPG.

1. SVG
Scalable Vector Graphics
Codewords @redpandalabs 2016-07-29
Shweta Sadawarte
Siddhesh Nikude
@Nelkinda Software Craft Pvt Ltd
@ShwetaSadawarte @SiddheshNikude @nelkinda @redpandalabs #Codewords #SVG

2. Agenda
● History of SVG
● Syntax and Anatomy of SVG files
● Basic Shapes, Paths and Text
● Integrating SVG with (X)HTML5
● Styling SVG with CSS
● SVG Animation
○ Declarative with SMIL
○ Imperative with JavaScript
● Generating SVG
○ From XML with XSLT
● How SVG contributes to Reactive Design
● Comparison of SVG with (X)HTML5 Canvas

3. ● Raster images are made up of a set grid of
dots called pixels where each pixel is
assigned a color value.
● Number of pixels is limited
● Resolution dependent.
● Raster image file types BMP, JPEG, PNG
Types of images: Raster

5. ● In physics, vectors is a representation of
both a magnitude (or length) and a direction.
● In vector graphics, the shape is saved as
vector statements.
● Mathematical equations, rather than pixels
● Vector images file types drw, pct, svg
Types of images: Vectors

7. 1. History of SVG

8. 1998 Macromedia and Microsoft introduce VML
1998 Adobe and SUN submit PGML to W3C
1998 W3C creates SVG Working Group
2001 SVG 1.0 becomes W3C REC
2003 SVG 1.1 becomes W3C REC including Tiny and
Basic profiles for Mobile SVG
2008 SVG Tiny 1.2 becomes W3C REC
2011 SVG 1.1 Second Edition
History of SVG

9. Explaining the name: SVG
“SVG stands for Scalable Vector Graphics, an XML
grammar for styleable [and scriptable] graphics,
usable as an XML namespace.”

10. Explaining the name: SVG
Scalable
Change size uniformly without loss in size. Possible
because graphics are defined as numbers i.e. scaling
involves multiplying or dividing numbers defining SVG
shape
Vector Graphics
Shapes to be displayed are stored as vectors or vector
like structures (as numbers, not as pixels)

11. Explaining the name: SVG
XML
Parsers widely available
Namespace
Mixing SVG with other XML languages like
XHTML, SMIL and MathML
Styleable (and scriptable)
Use CSS (and JavaScript)

12. Why SVG?
1. Scalable
2. Fast to load/ Small in size
3. Scriptable (or Interactive)
4. Animatable
5. Searchable
6. Support on Browsers and Mobile

13. Where to use SVG?
1. Two dimensional graphs
2. Column charts, Pie charts
3. Scalable icons and logos
4. Architecture and design diagrams
5. Road Maps
6. Simple games

14. Where not to use SVG?
Not ideal for bitmap graphics like photos,
movies etc.

15. Related Standards
● Extensible Markup Language (XML) 1.0
● Namespaces in XML
● XML Linking Language (XLink) (incl. XML Base)
● CSS
● XSLT
● Associating Style Sheets with XML documents
● DOM (Level 1 and much of Level 2)
● Synchronized Multimedia Integration Language (SMIL) 3.0
● HTML 4, XHTML 1.0 (and (X)HTML5)
● Unicode
● Accessibility

16. 2. Syntax of SVG

17. ⇒ XML Syntax applies
SVG files are XML files

18. ● Elements must be complete
(Tags must always be closed)
● Elements must be nested
(Tags must be closed in reverse order)
● Only 5 predefined entities:
& &amp; < &lt; > &gt;
' &apos; " &quot;
XML Basics for SVG

19. SVG Namespace and Identifiers
Namespaces:
SVG: http://www.w3.org/2000/svg
XLink: http://www.w3.org/1999/xlink
Public Identifier for SVG 1.1:
PUBLIC "-//W3C//DTD SVG 1.1//EN"
System Identifier for the SVG 1.1 Recommendation:
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd
Example Document Type Declaration:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

20. Hello, World in SVG
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<text y="12pt">Hello, World!</text>
</svg>
Note: Document Type Declaration shown for completeness. Not needed. Not
recommended.

21. Structuring, Grouping and Referencing in
SVG
<g>,<use>, <defs> and <symbol> Elements
For structuring a document by using SVG elements that allow us to define,
group, and reference objects within the document. These elements make
reusing elements easy, while maintaining clean and readable code.

22. ● The group <g> element is used for logically grouping together sets of
related graphical elements.
<g/>

23. <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1024" height="250">
<line x1="10" y1="10" x2="85" y2="10"
style="stroke: #006600;"/>
<rect x="10" y="20" height="50" width="75"
style="stroke: #006600; fill: #006600"/>
<text x="10" y="90" style="stroke: #660000; fill: #660000">
Text to demonstrate grouping with shapes</text>
</svg>

24. <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1024" height="250">
<g transform="rotate(45 50 50)">
<line x1="10" y1="10" x2="85" y2="10"
style="stroke: #006600;"/>
<rect x="10" y="20" height="50" width="75"
style="stroke: #006600; fill: #006600"/>
<text x="10" y="90" style="stroke: #660000; fill: #660000">
Text to demonstrate grouping with shapes</text>
</g>
</svg>
<g/>

25. <defs/>
● The <defs> element is like a “template” that you want to reuse later at
multiple times throughout the document.
● <defs> allows to reuse:
○ single element
○ g (group of elements)
○ symbol

26. <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1024" height="250">
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>
<rect fill="url(#Gradient01)" x="1cm" y="2cm" width="6cm" height="1cm" />
<circle fill="url(#Gradient01)" r="20" cx="20" cy="20"/>
</svg>
<defs/> - Using pattern

27. ● The <use> element lets you reuse existing elements, giving you a similar
functionality to the copy-paste functionality in a graphics editor.
<use/>

28. <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1024" height="250">
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />
</svg>
<defs/> - Using <g/> and <use/>

29. ● <symbol> elements combines the benefits of both the <defs> and the <g>
elements.
● Used to define symbols such as icons, for example, that are referenced
throughout the document.
● It accepts a viewBox attribute which allows it to scale-to-fit inside any
viewport it is rendered in.
<symbol/>

30. <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1024" height="250">
<defs>
<symbol id="symbolShape">
<circle cx="50" cy="50" r="50" />
</symbol>
</defs>
<use xlink:href="#symbolShape" x="50" y="50" />
</svg>
<defs/>-Using <symbol/> & <use/>

31. SVG file
<svg>
<defs>
<g id="shape-icon-1">
...
<g>
<g id="shape-icon-2">
...
<g>
</defs>
</svg>
HTML file
<svg viewBox="214.7 0 182.6
792">
<use
xlink:href="#shape-icon-1" />
</svg>
<svg viewBox="0 26 100 48">
<use
xlink:href="#shape-icon-2" />
</svg>

32. SVG file
<svg>
<symbol id="shape-icon-1"
viewBox="214.7 0 182.6 792">
...
</symbol>
<symbol id="shape-icon-2"
viewBox="0 26 100 48">
...
</symbol>
</svg>
HTML file
<svg>
<use
xlink:href="#shape-icon-1" />
<use
xlink:href="#shape-icon-2" />
</svg>

33. Viewport
<svg width="800" height="600"></svg>
ViewBox
<svg width="800" height="600" viewBox="0 0 400 300" >
preserveAspectRatio
preserveAspectRatio = <align> <meetOrSlice>
Viewport, ViewBox and
preserveAspectRatio

34. Unit Description
em Default font size - usually the height of a character.
ex The height of the character x
px Pixels
pt Points (1 / 72 of an inch)
pc Picas (1 / 6 of an inch)
cm Centimeters
mm Millimeters
in Inches
Coordinate System Units

35. 3. Basic Shapes, Paths
and Texts

36. <line/>
<polyline/>
<polygon/>
<rect/>
<circle/>
<ellipse/>
Basic Shapes, Paths and Texts
<path/>
<text/>

37. 4. SVG Animation

38. ● Synchronized Multimedia Integration
Language (SMIL)
● JavaScript
● CSS
Advantage to SMIL over JS animations is that JS
animations don't work when the SVG is embedded as an
img or used as a background-image in CSS. SMIL
animations do work in both cases
SVG Animation

39. 1. <set>
2. <animate>
3. <animateTransform>
4. <animateMotion>
SVG animation

40. <set>
<circle cx="30" cy="30" r="25" style="stroke: none; fill:
#0000ff;">
<set attributeName="r" attributeType="XML"
to="100"
begin="5s" />
</circle>

41. xlink:href
<rect id="cool_shape" …></rect>
<animate xlink:href="#cool_shape" ... />

42. <animate>
<circle cx="30" cy="30" r="25" style="stroke: none; fill:
#0000ff;">
<animate attributeName="cx" attributeType="XML"
from="30" to="470"
begin="0s" dur="5s"
fill="remove" repeatCount="indefinite"/>
</circle>

43. <animateTransform>
<rect x="20" y="20" width="100" height="40"
style="stroke: #ff00ff; fill:none;" >
<animateTransform attributeName="transform"
type="rotate"
from="0 100 100" to="360 100 100"
begin="0s" dur="10s"
repeatCount="indefinite"
/>
</rect>

44. <animateMotion>
<rect x="0" y="0" width="30" height="15"
style="stroke: #ff0000; fill: none;">
<animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="0s" dur="10s" repeatCount="indefinite"
/>
</rect>

45. Time Units
h Hours
min Minutes
s Seconds
ms Milliseconds
hh:mm:ss
1:30:45

46. Coordinating Animations
<rect x="0" y="0" width="30" height="15"
style="stroke: #ff0000; fill: none;">
<animate id="one"
attributeName="x" attributeType="XML"
from="0" to="400"
begin="0s" dur="10s" fill="freeze"
/>
<animate
attributeName="y" attributeType="XML"
from="0" to="50"
begin="one.end" dur="10s" fill="freeze"
/>
</rect>

47. 5. Integrating SVG with
HTML5

48. ● A stand-alone SVG Web page
● Embedding by reference
(X)HTML: <img/> element
● Embedding inline (namespaces)
● External link
(X)HTML: <a/> element
● Referenced from CSS or XSL
Options for using SVG on the Web

49. A stand-alone SVG Web page
<svg xmlns="http://www.w3.org/2000/svg">
<text y="50pt">Hello, World!</text>
</svg>

50. Embedding by reference
● <img src="image.svg" />
● <iframe src="image.svg"></iframe>

51. Embedding inline
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
</head>
<body>
<h1>Text Example</h1>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="20" y="40">This is SVG text</text>
</svg>
</body>
</html>

52. External link using <a/>
<!DOCTYPE>
<html>
<head>
<title>Grouping g element</title>
</head>
<body>
<a href="helloWord.svg">hello</a>
</svg>
</body>
</html>

53. Referenced from CSS
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.logo {
background: url(helloWorld.svg);
display: block;
}
</style>
<a href="/" class="logo"></a>
</body>
</html>

54. 6. Styling SVG with CSS

55. ● Using presentation attribute
● Using css properties
● <style> tag inside <svg>
● Embedded stylesheet
● External Stylesheet
How SVGs can be styled in CSS

56. <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="300px" height="300px" viewBox="0 0 300 300">
<polygon
fill = "#FF931E"
stroke = "#ED1C24"
stroke-width = "5"
points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1
27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114
"/>
</svg>
Using Presentation Attribute

57. <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
style="width: 300px; height: 300px;" viewBox="0 0 300 300">
<polygon
style = "fill: #FF931E; stroke: #ED1C24; stroke-width: 5;"
points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1
27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114
"/>
</svg>
Using CSS Properties

58. <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
circle {
stroke: #006600;
fill: #00cc00;
}
]]>
</style>
<circle cx="40" cy="40" r="24"/>
</svg>
SVG with <style> tag inside the SVG tag

59. <!DOCTYPE html><!-- HTML5 document -->
<html>
<head> … </head>
<body>
<style type="text/css">
circle {
stroke: #006600;
fill : #00cc00;
}
</style>
<!-- xmlns is optional in an HTML5 document →
<svg>
<circle cx="40" cy="40" r="24" />
</svg>
</body>
</html>
SVG with Embedded stylesheet

60. SVG with External Stylesheet
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=".."
height=".." viewBox="..">
<!-- SVG content -->
</svg>

61. 7.1 Declarative Animation
with SMIL

62. Live Demo: Clock

63. 7.2 Imperative Animation
with JavaScript

64. Live Demo: Clock

65. 8. Generating SVG

66. 8.1 Generating SVG from
XML with XSLT

67. 9. How SVG Contributes
to Reactive Design

68. 10. Comparison of SVG
with (X)HTML5 Canvas

69. SVG
● Vector based (composed of
shapes)
● Resolution independent.
● Multiple graphical elements,
which become the part of the
DOM.
● Modified through script and CSS.
● SVG is not suited for game
applications.
● Better scalability — can be
printed with high quality at any
resolution
Canvas
● Raster based (composed of
pixel)
● Resolution dependent.
● Single HTML element similar to
<img> in behavior.
● Modified through script only.
● Canvas is suited for
graphic-intensive games.
● Poor scalability — not suitable
for printing on higher resolution

70. ● Adobe Illustrator
● Inkscape
● SVG-edit
● Boxy SVG
Editors for SVG

71. ● Peter Collingridge’s - Online tool
● SVGO (the “O” is for “optimizer”) - Offline
tool
● SVGOMG
● Inkscape Plugin
Tools for SVG

72. Questions?
Thank You!
@ShwetaSadawarte @SiddheshNikude @nelkinda @redpandalabs #Codewords #SVG