SVG - Scalable Vector Graphics

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

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

● 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

● 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

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

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

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)

XML
Parsers widely available
Namespace
Mixing SVG with other XML languages like
XHTML, SMIL and MathML
Styleable (and scriptable)
Use CSS (and JavaScript)

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

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

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

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

⇒ XML Syntax applies
SVG files are XML files

● Elements must be complete
(Tags must always be closed)
● Elements must be nested
(Tags must be closed in reverse order)
● Only 5 predefined entities:
& & < < > >
' ' " "
XML Basics for SVG

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">

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.

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.

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

<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/>

<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

<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

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

<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/>

● <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/>

<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/>

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
</svg>

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
<use
</svg>

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

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

3. Basic Shapes, Paths
and Texts

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

● 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

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

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

<animateMotion>
style="stroke: #ff0000; fill: none;">
<animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="0s" dur="10s" repeatCount="indefinite"
/>
</rect>

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

Coordinating Animations
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>

● 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

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

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

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

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

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>

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

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

<!DOCTYPE html>
<html>
<head> … </head>
<body>
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

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>

7.1 Declarative Animation
with SMIL

7.2 Imperative Animation
with JavaScript

8.1 Generating SVG from
XML with XSLT

9. How SVG Contributes
to Reactive Design

10. Comparison of SVG
with (X)HTML5 Canvas

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

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

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

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

SVG - Scalable Vector Graphics

More Related Content

What's hot

Similar to SVG - Scalable Vector Graphics

Recently uploaded

SVG - Scalable Vector Graphics