Scalable Vector Graphics (SVG) - An Introduction, Lecture notes of Computer Graphics

Download Scalable Vector Graphics (SVG) - An Introduction and more Lecture notes Computer Graphics in PDF only on Docsity!

Scalable Vector (Images and)

Graphics: SVG

CO

Multimedia and Computer Graphics

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 1

Overview

What is SVG? Why SVG and not FLASH Creating simple shapes Introduction to attributes Grouping Animation

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 2

What is SVG?

SVG is coded using XML format SVG is a World Wide Web Consortium (W3C)recommendation SVG integrates with other W3C standards such as theDOM and XSL

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 3

More Advantages of Using SVG SVG files can be read and modified by any text editor SVG files are smaller and more compressible thanJPEG and GIF images SVG images can be printed with high quality at anyresolution Text in SVG is selectable and searchable SVG works with Java technology SVG is an open standard SVG files are pure XML

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 4

Template for <file-name>.svg

PUBLIC

"^

//W3C / / DTD SVG

1. 1 / / EN"

" h t t p : / / www. w3. org / Graphics /SVG/ 1. 1 / DTD / svg11. d td " >

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 6

Embed SVG into HTML

There are various options for embedding SVG into HTML.The preferred option for this module is:

... < i f r a m e s r c = " myFileName. svg " w i d t h = " 450 " h e i g h t = " 300 " > </ i fr a m e >^...

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 7

The Stroke

Roughly speaking:

Stroke

refers to a line, text, or the

outline of an element. A stroke has width, colour and other attributes. A blue rectangle might have a red stroke boundary witha (relatively) small width...

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 9

How to Use Simple Shapes

Each shape has a corresponding

tag

. Inside the tag the

attributes for the shape can be set.Example of a rectangle:

< r e c t x= " 0 " y= " 30 " w i d t h = " 40 " h e i g h t = " 20 ’ ’ > </ r e c t >

Further attributes are

fill

(color)

stroke-width

(rational number ie decimal)

stroke

(color) [ NB

stroke

, not

stroke-color

!! ]

fill-opacity

(rational between 0 and 1)

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 10

Cascading Style Sheets

Cascading Style Sheets (CSS) is a simple mechanism foradding style (e.g. fonts, colors, spacing) to Web documents.SVG shares many of its styling properties with CSS.See

http://www.w3.org/Style/CSS/

and

http://www.w3.org/TR/SVG/styling.html

for more

details.

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 12

Path

A path in SVG is a sequence of commands, with eachcommand typically “moving to a point”, “drawing a line”,“drawing a curve” and so on.Classically this is used to draw (curved) lines and shapes.We will revisit paths when creating animated images: apath is used to specify the “animation path”.

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 13

Path Commands

All of the commands can also be expressed with lower caseletters. Capital letters mean absolutely positioned, lowercase letters mean relatively positioned.

<path d= " M

L

L

Z "

<path d= " M

l 5 0

L

Z "

The documentation and examples for all Path commandscan be found at http://www.w3.org/TR/2000/CR-SVG-20001102/paths.html

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 15

Path Examples

<path d= " M300, h

a150 ,

z " s t y l e = " f i l l : red ; s t r o k e : b l u e ; s t r o k e

w i d t h : 5 " / > <path d= " M275, v

a150 ,

z " s t y l e = " f i l l : y e l l o w ; s t r o k e : b l u e ; s t r o k e

w i d t h : 5 " / > <path d= " M600, l^

a25 ,2 5

l^

a25 ,5 0

l^

a25 ,7 5

l^

a25 ,

l^

s t y l e = " f i l l : none ; s t r o k e : red ; s t r o k e

w i d t h : 5 "

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 16

Grouping Elements

The g tag is a container element for grouping togetherrelated elements.

< r e c t x= " 0 " y= " 0 "^ h e i g h t = " 150 " w i d t h = " 225 "^ s t y l e = " f i l l : rgb ( 0 , 0 , 1 5 6 ) " > </ r e c t > < c i r c l e cx= " 112.5 " cy= " 75 "^ r = " 0 "^ f i l l = " w h i t e " > </ c i r c l e >

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 18

Element Identifiers

The defs tag is a container and is used to define identifiersfor elements. These elements can be referenced later in theimage by quoting the identifier.For each element to be referenced the id attribute must beset.

<g i d = " sp1 "

<polygon p o i n t s = "

s t y l e = " f i l l : w h i t e " / > < r e c t

</ defs >

Roy Crole: Scalable Vector Graphics (CO2016, 2014/2015) – p. 19