introduction to computer graphicsave.dee.isep.ipp.pt/~jml/intmu/acetatos/vector.pdf · svg:...

30-03-2017

1

Vector Graphics

2017

“Sample-based Graphics” “Bitmapped Graphics” Images are made up for grid of discrete pixels, for 2D “picture

elements” Pixels are point locations with associated sample values, usually of

light intensities/colors, transparency, and other control information When we sample an image, we sample the point location along the

continuous signal

Raster Images

Visualization of a mathematical pixel grid

LCD display

CRT beam illumination pattern

Can’t resolve adjacent pixels on CRT

1 pixel

light intensity

30-03-2017

2

Samples created directly in paint-type program, or by sampling of continuous (analog) visual materials.

Sample values can also be input numerically (e.g., with numbers from computed dataset)

Once an image is defined as pixel-array, it can be manipulated

Image editing: changes made by user, such as cutting and pasting sections, brush-type tools, and processing selected areas

Image processing: algorithmic operations that are performed on image (or pre-selected portion of image) without user intervention. Includes blurring, sharpening, edge-detection, color balancing, rotating, and warping.

Sample-based Graphics

Vector Graphics

Best used for images consisting of geometric shapes and lines (i.e. maps, charts, CAD projects, etc.)

Consist of directions for drawing objects

Text is generally a vector graphic.

File size depends on number and complexity of objects.

File size does not depend on screen size / resolution.

Can be scaled without affecting image quality

Traditionally produced by drawing applications like Adobe Freehand™, Canvas, CorelDRAW or Inkscape

30-03-2017

3

Vector displays

Vector Displays

30-03-2017

4

Bitmapped and Vector Graphics

Bitmapped graphics : image is modeled as an array of pixel values

Vector graphics : image is modeled as mathematical description of curves, shapes

(x,y)

r

Bitmapped

Example:

10 X 10 grid

100 pixels

256 colors (8 bits = 1 byte)

M = 10 x 10 x 1 = 100

100 bytes to store the file

30-03-2017

5

Vector

Example:

Circle( x, y, r, color)

or

Arc( 360, x, y, r, color)

If x, y, r, color stored using 8 bits

Total < 10 Bytes

(x,y)

r

Bitmapped

Render by direct mapping of logical pixels to physical pixels of screen

30-03-2017

6

Vector

Render by computing pixels from geometric coordinates.

Can require more computation

(x,y)

r

Memory Requirements

Bitmapped – any picture of W x H pixels, using C Bytes per pixel occupies WxHxC Bytes

Vector – space required depends on complexity of picture (how many shapes, segments of path, etc)

Usually vector graphics are smaller than bitmapped

30-03-2017

7

Memory Requirements

128 px square with 20px blue outline filled in red

Bitmap using 24 bits per pixel

128x128x3 = 48 000 Bytes

Vector specified in SVG: <path fill="#F8130D" stroke="#1E338B" stroke-width="20"

d="M118,118H10V10h108V118z"/>

86 Bytes (plus 198 Bytes SVG header + …)

Memory Requirements

1280 px square with 20px blue outline filled in red

Bitmap using 24 bits per pixel

1280x1280x3 = 4 915 200 Bytes

Vector specified in SVG: <path fill="#F8130D" stroke="#1E338B“ stroke-width="20"

d="M1180,1180H10V10h1080V1180z"/>

90 Bytes (plus 198 Bytes SVG header + …)

30-03-2017

8

Raster vs. Vector Graphics

Raster Application

30-03-2017

9

Vector Application

Vector / Raster

Aplicações vector (draw)

Rasterização

Rasterização

Imagem

Lista deobjectos

Ordens dedesenho

Ordens dedesenho

Visualização

Visualização

Aplicações Raster (paint)

30-03-2017

10

Painting vs. Drawing

Vectors – drawing programs

Select individual graphic objects (shapes, paths, &c)

Transform size, position, angle,

Change attributes: stroke and fill

Bitmaps – painting programs

Select areas of pixels

Apply effects and filters

70–71

Painting, Drawing, Image Editing

Painting programs often have support for tablet devices.

Mimics paper & pen or canvas & paint

Drawing programs often have support for geometric objects

Fireworks is classic example

Image Editing

Focuses on manipulating existing images rather than creating ones from scratch (Photoshop)

30-03-2017

11

Scaling

Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes

Bitmaps

Interpolate pixel values

More or less sophisticated algorithm

Usually produces loss of quality, blurring, jaggedness &c

71

Vectors vs Bitmaps

Animation is much simpler using vectors.

Accessibility to editing - easier to edit quickly a textual file than a binary file.

Interactivity – the ease of using scripts allows very good interactivity.

30-03-2017

12

Conversions Vectors <-> Bitmaps

Rasterize vectors

Lose all their vector properties

Also called Flattening

Trace bitmaps

Difficult and can only produce an approximation (parameterized)

73–75

Vector Bitmap

Rasterize

Trace

Combining Vectors & Bitmaps

Import bitmaps into vector drawing programs

Treat bitmaps as indivisible objects

Bitmap editing programs often provide no support for importing vector images.

30-03-2017

13

Clique para editar o estilo Stright lines

1

1

2

2

3

3

4

4

5

5

6

6

7

7

8

8

9

9

10

10

11

11

12

12

13

13

14 15 16

Linha( 2, 5, 15, 8 )

)( 1

12

121 xx

yy

xxyy

12

12

xx

yym

110 xmyy

xmyy 0

=> Floating point calculation

m = (y2-y1)/(x2-x1)

y0 = y1-m*x1

for x = x1 to x2

y = round( y0+m*x )

put_pixel(x, y)

line

Clique para editar o estilo Bresenham Algorithm

1

1

2

2

3

3

4

4

5 6

B1

B2

C1 C2

12 yyy

12 xxx

Pixel 0

Put_pixel(x1,y1)

Pixel 1

x

yB

1

x

yC

11

If B1<C1 put_pixel (x1+1, y1)

Else put_pixel (x1+1, y1+1)

0101111

x

y

x

yCBCB

02012

xy

x

y

xyCBxD

D

2)(

0

111

1

30-03-2017

14


Pixel 2

x

yB

x

yB

12 2

x

yC

x

yBBC

1122 11

yDyCBx

x

yC

x

yBxCBxD

22)(

)(

111

11222

Se D2<0 put_pixel (x1+2, y1)

Senão put_pixel (x1+2, y1+1)

dy = y2-y1

dx = x2-x1

d = 2*dy-dx

y = y1

for x = x1 to x2

put_pixel( x, y)

if d>=0

y = y+1

d = d+2*(dy-dx)

else

d = d+2*dy

Clique para editar o estilo Circumference

x

P1

P2

P4

P5

P6 P7

P8

P3

y

( , )x yo o

30-03-2017

15


r

x

y

Ci

Bi

para circunferências

d = 3-2*r

y = r

xmax = r/sqrt(2)

for x = 0 to xmax

put_8_pixels( x, y)

if d>0

d = d+4*x+6

else

y = y-1

d = d+4*(x-y)+10

for circumferences

2D Translaction

P

0 x

yv

P’

y

x

vyy

vxx

PyxP

'

'

),( v

30-03-2017

16

2D Scale

P

0 x

yP’

syy

sxx

PsP

'

'

2D Rotation

P’

0 x

y

P

cossen'

sencos'

)(

yxy

yxx

PRP

30-03-2017

17

Matrix formulas

PP R

cossen

sencos

R

PP sysx ,S

y

x

sysx

s

s

0

0

,S

Rotation Scale

When using cartesian coordenates, it is not possible to specify a translation by a matrix product. Solution: Homogeneous Coordenates

Homogeneous Coordenates

h

h

h

h

hhh

w

yy

w

xx

yxwyxyxP )1,,(),,(),(

100

10

01

y

x

v

v

vT

100

00

00

, y

x

sysx s

s

S

100

0cossen

0sencos

R

PP RPP sysx ,SPP vT

Rotation Scale Translaction

30-03-2017

18

Compound Transformations

100

0

0

100

10

01

100

00

00

100

10

01

yy

xx

CzC

y

x

Czy

x

C

czcz

czcz

c

c

z

z

c

c

TSTQ

TST0

0

0

0

x

x

x

x

y

y

y

y

Q

T-CTC

Sz

X

XX

X

Clique para editar o estilo

R

F P

T

G

S

30-03-2017

19

39 Vector Graphics

Not resolution dependent

Infinitely scalable

Not appropriate for photo realistic images

In general vector formats can include raster images as well as geometric objects and combine them with vector information.

Vector Formats

40 Vector Graphics

WMF

AI

Post Script

CGM

DXF

Fonts

DRW

CIL

SVG

PDF

Common Vector File Formats

30-03-2017

20

41 Vector Graphics

Windows Metafile Format.

Designed for easy exchange between

Windows programs via clipboard.

Common clipart format.

16 bits.

Enhanced MetaFile (.emf)

32 bit version

Enhanced MetaFile Plus Extensions (emf+)

Windows XP version

WMF Format

42 Vector Graphics

Developed by Adobe Systems, 1984.

Expanded for many graphic elements.

Encapsulated PostScript (.eps) is of this format.

Mainly used by printers.

PostScript Format

30-03-2017

21

43 Vector Graphics

Adobe Acrobat file format.

Portable Document Format

Integrates bitmap images, vector graphics and text

Includes document formatting, fonts, colors

Designed to be identical across platforms

Searchable format

PDF Format

44 Vector Graphics

Computer Graphics Metafile

Most common DOS-based format

Used by : Harvard Graphics

Freelance Graphics

Others

Older versions of format may not load cleanly into modern versions of software

Can support very elaborate graphics

A "schizophrenic" file format!

CGM Format

30-03-2017

22

Windows Metafile Format. Designed for easy exchange between

Windows programs via clipboard.

Common clipart format.

16 bits.

Enhanced MetaFile (.emf) 32 bit version

Enhanced MetaFile Plus Extensions (emf+) Windows XP version

WMF Format

Developed by Adobe Systems, 1984.

Expanded for many graphic elements.

Encapsulated PostScript (.eps) is of this format.

Mainly used by printers.

PostScript Format

30-03-2017

23

Vector Graphics Formats

SVF - Simple Vector Format. Plug-in for CAD drawing representation - 1996. No more development after 1997. Limited, no animation. http://www.softsource.com/svf

DWF - Drawing Web Format. Plug-in can be used with Javascript - but with no animation enabled. http://www.autodesk.com/whip/

Flash - Marcomedia’s Vector Graphics Format. The most up to date. Supports full multimedia features. Occupies about 70% of the market. http://www.macromedia.com/software/flash

Vector Graphics Formats(2)

VML - Vector Markup Language - based 2D vector format by Microsoft - not developed after 1998. Limited to one single platform - Microsoft. http://www.w3.org/TR/NOTE-VML

WebCGM - computer graphics metafile for the Web - binary format. Primarily designed to visualize technical and scientific drawings. http://www.w3.org/Graphics/WebCGM

VRML - Virtual Reality Modeling Language - devoted to 3D, supports 2D as well - complicated for simple presentations. Http://www.web3d.org

30-03-2017

24

SVG

SVG: Scalable Vector Graphics

A language for describing 2D vector graphics

Allows:

mixed vector/raster graphics.

Dynamic and interactive graphics

Animation via scripting

SVG background

An open standard developed by SVG-WG.

SVG specification is available in: http://www.w3.org/TR/2000/CR-SVG-20001102/

Open standard by W3C since 2001

Supported by most Web browsers.

Versions

SVG 1.0, 2001

SVG 1.1, 2003

SVG Tiny and SVG Basic (Mobile SVG Profiles)

SVG Tiny 1.2, 2008.

SVG 1.1 Second Edition, 2011.

SVG 2.x

30-03-2017

25

Motivation for SVG

Text based language.

Simple to program.

Takes advantage of existing tools - XML, CSS, XSL.

Powerful graphics capabilities - high performance, full animation support.

Open standard.

Several Extensions:

MathML.

…

Searchable.

SVG in WWW

Web server can store resolution independent graphics.

Single version can be delivered to many different clients.

Rendering is done on the client side.

uses local processing power.

Clients can scale and apply transformation to images interactively.

30-03-2017

26

54 Vector Graphics

What is SVG?

A dynamic new graphics standard released by the W3C in 2001

Combines advantages of many older graphics standards into one format

Adds new capabilities not known to graphics before

Growing in popularity, and receiving more and more support from drawing programs and browsers

55 Vector Graphics

History of SVG

Mid-1990’s: Adobe, Microsoft, and Macromedia began to develop new web graphic standards

New standard would have to: Be resolution independent

Maintain quality on different size screens

Maintain a small file size

Receive widespread browser support

Support photographic-quality images

30-03-2017

27

56 Vector Graphics

History of SVG (cont.)

Macromedia was the first company to achieve a new web graphics standard, when it purchased Future Splash in 1996, and named the technology Flash

The industry still felt that a new standard was needed, because Flash lacked built-in browser support, it was proprietary, and it was designed for animations, not static graphics

57 Vector Graphics


1998: Adobe submitted Precision Graphics Markup Language (PGML) to W3C as an XML-based graphic standard

1998: Microsoft submitted Vector Markup Language (VML) to the W3C, which Macromedia also supported

1999: W3C decided PGML and VML would be merged into a new standard, and Microsoft and Macromedia abandoned development of the new standard at that time

30-03-2017

28

58 Vector Graphics


September 2001: SVG became a formal W3C recommendation

Late 2001: Adobe claimed it had ownership and royalty rights on SVG

January 2002: The Internet community protested Adobe’s claim, and Adobe abandoned the issue

January 2003: SVG 1.1 released by W3C

59 Vector Graphics

Current SVG Tools

Development Text Editor

Adobe Illustrator 10

Corel Draw 11

Jasc WebDraw

Inkscape

libsvg

Viewing Browser support:

Firefox,

Google Chrome

Safari

Promised future support by IE

SVG Viewers from: Adobe

Corel

IBM

Apache

30-03-2017

29

60 Vector Graphics

Advantages of SVG

Text-based: easy to code and edit

Open source: royalty-free, license-free

Written in XML: the future of IT

Official standard from the W3C

Accessibility: scalability & screen readers

Searching: based on text, accessible by XML-aware search engines

Can be updated from a database

Browser support either natively or through a viewer

61 Vector Graphics

Advantages of SVG (cont.)

Can be exported from geographic information systems (GIS) software

Supports animation and interactivity

Supports filters, transformations, clipping, and masks

Supports transparency

Can be edited in popular drawing programs such as Adobe Illustrator and Corel Draw

Supports scripting (ECMA scripts)

Can be customized by CSS

30-03-2017

30

62 Vector Graphics

SVG Foundations in XML

An SVG is written in XML 1.0 syntax in a text editor, or generated by a drawing program

SVG abides by XML’s strict coding rules

SVG contains elements and attributes, as does XML

SVG is based on mathematical formulas, like traditional vector graphics

SVG elements are placed on the X and Y axis

63 Vector Graphics

• SVG has four different DTDs

• Original version of SVG, 1.0

• Full version - SVG 1.1

• Basic version – SVGB

• Tiny version – SVGT

• SVG documents are required to have a root element:

• the svg element

• SVG content

• Three fundamental types of graphical objects:

• Primitive vector shapes (lines, circles, squares, etc)

• Vector text

• External bitmap images

SVG

30-03-2017

31

64 Vector Graphics

Elements

Element type name can be thought of as the tag name.

It determines how the tag will function and consists of one

empty (also known as “closed”) tag or two enclosing tags

(a start tag and an end tag).

Each Attribute describes an element by giving further information

65 Vector Graphics

SVG document

SVG code is found inside <svg> element tag (<svg>……</svg>).

An SVG document consists of one SVG element.

An SVG element can be empty, contain basic shapes, groups or other SVG elements.

30-03-2017

32

66 Vector Graphics

A HelloWorld SVG

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"

"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">

<svg width= "300" height= "300">

<text x= "100” y= "100"> Hello, World! </text>

</svg>

Hello, World!

(100,100)

(0,0)

(300,300)

67 Vector Graphics

Circle

<svg width="120" height="120"

viewPort="0 0 120 120" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<circle cx="60" cy="60" r="50"/>

</svg>

30-03-2017

33

68 Vector Graphics

Rect

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="12cm" height="4cm" viewBox="0 0 1200 400"

xmlns="http://www.w3.org/2000/svg" version="1.1">

<desc>Example rect01 - rectangle </desc>

<rect x="400" y="100" width="400" height="200"

fill="yellow" stroke="navy" stroke-width="10" />

</svg>

(400,100)

69 Vector Graphics

SVG: text

<svg width="600" height="400">

<rect x="1" y="1" width="598" height="398" />

<text x="210" y="25" style=fill:#FFFFFF;

stroke:none;

font-family:Arial, sans-serif;

font-size:22">

Hello World!

</text>

</svg>

30-03-2017

34

70 Vector Graphics

Tag Argument Effect

M,m x,y move

L,l x,y line

H,h x horizontal line

V,v y vertical line

Z,z close

Path

71 Vector Graphics

Path (move, line, close)

<path id="grass"

d=" M0 479

L639 479 L633 450

L627 470 L621 450

L615 470 L609 450

L603 470 L597 450

L591 470 L585 450

L579 470 L573 450

L567 470 L561 450

L555 470 L549 450

L543 470 ...

Z"

style="fill:green; stroke:black; stroke-width:1„

/>

30-03-2017

35

72 Vector Graphics

Tag Argument Effect

A,a rx, ry, x-axis-rotation large-arc

sweep x y

elliptical arc

Q,q x1, y1, x, y quadratic Bézier curve

T,t x, y quadratic Bézier curve

C,c x1, y1, x2, y2, x, y cubic Bézier curve

S,s x2, y2, x, y cubic Bézier curve

Path (curves)

73 Vector Graphics

Path (curves)

<path id="gras_1"

d=" M639 470 L-0.00078 470

L7.175 409.23

C15.44 422.17 11.99 461 11.99 461

L22.70 413.94

C17.14 431.58 23.99 461 23.99 461

L29.99 441

L35.99 461

C37.20 443.64 26.70 391.58 26.70 391.58

C43.79 408.94 46.82 446.88 46.82 446.88

C46.82 446.88 51.02 413.05 59.88 393.94

C59.88 393.94 57.61 441.88 59.99 461

L65.99 441

…

Z

/>

30-03-2017

36

74 Vector Graphics

SVG: g

The ‘g’ element is a container element for grouping together related graphics elements.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >

<desc>Two groups, each of two rectangles</desc>

<g id="group1" fill="red">

<rect x="1cm" y="1cm" width="1cm" height="1cm"/>


</g>

<g id="group2" fill="blue">



</g>

</svg>

75 Vector Graphics

Transformation Argument Effect

translate x, y Translation

scale xfactor, yfactor Scaling

scale factor Uniform Scaling

rotate angle Rotation around (0,0)

rotate angle, centerX,

centerY

Totation around (centerX, centerY)

skewX angle X skew

skewY angle Y skew

matrix

Transformations

30-03-2017

37

76 Vector Graphics

Translation

<g id="palm" transform="translate(313 96)">

…

</g>

Before translation After translation

77 Vector Graphics

SVG: defs / use

The ‘defs’ element is a container element for referenced elements

<defs>

<g id="palme">

...

</g>

</defs>

<use xlink:href="#palme"/>

30-03-2017

38

78 Vector Graphics

<pattern> / <image>

<defs>

<pattern id="tile" width="50" height="50" patternUnits="userSpaceOnUse">

<image width="50" height="50" xlink:href="mypat.png" />

</pattern>

</defs>

<g>

<path d="..." style=" fill:url(#tile); stroke:rgb(0,0,0); stroke-width:1" />

<path d="..." style=" fill:url(#tile); stroke:rgb(0,0,0); stroke-width:1" />

</g>

79 Vector Graphics

Text Path

<defs>

<path id="path_1" d="M361.5 378 C465.5 364.25 447.5 351.75 502.5 342" style="fill:none;

stroke:rgb(0,0,0);

stroke-width:1"/>

…

</defs>

<text x="70" y="240"

style="Arial;text-anchor:start">

<textPath xlink:href="#path_1"> ISEP

</textPath>

</text>

30-03-2017

39

80 Vector Graphics

Animation

<animate>

<set>

<animateColor>

<animateTransform>

<animateMotion>

81 Vector Graphics

<set>

<path

d="..." transform="…" style="fill:none; stroke:rgb(255,0,0); stroke-width:2; visibility:hidden">

<set attributeName="visibility" attributeType="CSS"

begin="11.5s"

dur="1s"

fill="freeze"

to="visible" />

</path>

30-03-2017

40

82 Vector Graphics

<animateColor>

<rect x="1" y="1" width="638" height="478"

style="fill:rgb(255,255,255);

stroke:rgb(0,0,0);stroke-width:1">

<animateColor id="black_grass"

begin="3s"

attributeName="fill"

dur="5s"

fill="freeze"

from="rgb(255,255,255)"

to="rgb(0,0,0)" />

</rect>

83 Vector Graphics

<animateTransform>

<g id="cloud">

<animateTransform id="cloud_go" attributeName="transform" attributeType="XML"

type="translate" dur="5s" begin="3s" from="0 0"

to="650 0"/>

…

</g>

30-03-2017

41

84 Vector Graphics

ECMA scripts

<script type="text/ecmascript">

<![CDATA[

function enlarge_circle(evt)

{

var circle = evt.getTarget();

circle.setAttribute("r", 50);

}

function shrink_circle(evt)

{

var circle = evt.getTarget();

circle.setAttribute("r", 25);

}

// ]]>

</script>

<circle cx="150" cy="100" r="25" fill="red"

onmouseover="enlarge_circle(evt)"

onmouseout="shrink_circle(evt)"/>

85 Vector Graphics

Advanced Capabilities of SVG

Paths: used to draw 2D elements of any shape or size by defining points

Transformations: allow rotation and scaling of an object

Clipping and Masking: provide the ability to modify an object’s fill effect

Filters: provide effects such as drop shadows (associated with bitmaps)

Animation/Interactivity: can be accomplished with SVG tags, or with external script files

30-03-2017

42

86 Vector Graphics

Inkscape

87 Vector Graphics

More info on SVG

www.w3c.org

www.adobe.com/svg

xml.apache.org/batik

SVG Essentials (O‘Reilly)

introduction to computer graphicsave.dee.isep.ipp.pt/~jml/intmu/acetatos/vector.pdf · svg:...

Documents