Vector Graphics 2017 Raster Images Sample - based Graphics - - PDF document

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

• bjects.

 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)
• r
• 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 de

• bjectos

Ordens de desenho Ordens de desenho 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

• bjects
• 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 1 2 1 2 1

x x y y x x y y      

1 2 1 2

x x y y m   

1 1

x m y y    x m y y   

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

1 2

y y y   

1 2

x x x   

Pixel 0

Put_pixel(x1,y1)

Pixel 1

x y B   

1

x y C     1

1

If B1<C1 put_pixel (x1+1, y1) Else put_pixel (x1+1, y1+1)                    1

1 1 1 1

x y x y C B C B 2 1 2             x y x y                 x y C B x D D 2 ) (

1 1 1 1

30-03-2017 14

Clique para editar o estilo Bresenham Algorithm

Pixel 2

x y B x y B        

1 2

2 x y C x y B B C           

1 1 2 2

1 1 y D y C B x x y C x y B x C B x D                                 2 2 ) ( ) (

1 1 1 1 1 2 2 2

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 y

30-03-2017 15

Clique para editar o estilo Bresenham Algorithm

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 x y v P’

              

y x

v y y v x x P y x P ' ' ) , ( v

30-03-2017 16

2D Scale

P x y P’

            s y y s x x P s P ' '

2D Rotation

P’ x y



P

                  



cos sen ' sen cos ' ) ( y x y y x x P R P

30-03-2017 17

Matrix formulas

P P   



R                



cos sen sen cos R P P

sy sx

  

,

S           

y x sy sx

s s

,

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

w y y w x x y x w y x y x P ) 1 , , ( ) , , ( ) , (

                 1 1 1

y x

v v

v

T                  1

, y x sy sx

s s S                   1 cos sen sen cos    



R P P   



R P P

sy sx

  

,

S P P   

v

T

Rotation Scale Translaction

30-03-2017 18

Compound Transformations

                                                            

 

1 1 1 1 1 1 1 1

y y x x C z C y x C z y x C

c z c z c z c z c c z z c c T S T Q T S T

x x x x y y y y

Q T-C TC Sz

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

History of SVG (cont.)

 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

History of SVG (cont.)

 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"/> <rect x="3cm" y="1cm" width="1cm" height="1cm"/> </g> <g id="group2" fill="blue"> <rect x="1cm" y="3cm" width="1cm" height="1cm"/> <rect x="3cm" y="3cm" width="1cm" height="1cm"/> </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"

• nmouseover="enlarge_circle(evt)"
• nmouseout="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

• bject

 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)