Graphics 2D SVG

SVG

Friday, December 4, 2015 www.qsoftvietnam.com 1

Presenter:

Nguyễn Phi Linh

Lê Minh Hưởng

Nguyễn Công Đỗ


Outline

Introduction

Getting Started

Positions

Basic Shapes

Paths

Fills and Strokes

Gradients

Patterns

Animation

Texts

Transformations

Clipping

SVG Image Tag

Tools For SVG


Introduction

• SVG stands for Scalable Vector Graphics

• SVG is used to define vector-based graphics for the Web

• SVG defines the graphics in XML format

• SVG graphics do NOT lose any quality if they are zoomed or resized

• Every element and every attribute in SVG files can be animated

• SVG is a W3C recommendation

• SVG integrates with other W3C standards such as the DOM and XSL


Getting Started

• Start with the svg root element

• SVG files on the web can be displayed directly in the browser or embedded in

HTML files via several methods:

• <object data="image.svg" type="image/svg+xml" />

• <iframe src="image.svg"></iframe>

• Check support: <svg …>Message</svg>

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute


Positions


Basic Shapes


Rectangles

• rx : The x radius of the corners of the rectangle

• ry : The y radius of the corners of the rectangle

<rect>

x

y

width

height

rx

ry

Basic Shapes


Circle

• r : The radius of the circle.

• cx : The x position of the center of the circle.

• cy : The y position of the center of the circle.

<circle>

r

cxcy

Basic Shapes


Ellipse

<ellipse>

rx

ry

cx

cy

Basic Shapes


Line

x1 : The x position of point 1.

• y1 : The y position of point 1.

• x2 : The x position of point 2.

• y2 : The y position of point 2.

<line>

x1

y1

x2

y2

Basic Shapes


Polyine

<polyline>

Polylines are groups of connected straight lines

points

• Each point must contain two numbers, an x coordinate and a y coordinate. So the list (0,0), (1,1) and (2,2) could be written: "0 0, 1 1, 2 2".

Basic Shapes


Polygon

<polygon>

The path automatically returns to the first point for you at the end, creating a closed shape

points

• Each point must contain two numbers, an x coordinate and a y coordinate. So the list (0,0), (1,1) and (2,2) could be written: "0 0, 1 1, 2 2".

Paths


• The <path> element is the most powerful element in the SVG library of basic

shapes. It can be used to create (at least to a fairly good approximation), all the

other basic shapes and more.

• The shape of a path element is defined by one attribute: d. The d attribute contains a

series of commands and parameters used by those commands.

• Paths can be used to create smooth flowing lines using a relatively few number of control

points

• Similar looking effects can be created using just the polyline element, but you have to

use a lot of points to create a smooth looking effect, and it still won't scale well at larger

sizes.

Paths


Line commands

Moveto

Lineto

CurvetoArcto

ClosePath

• M = moveto

• L = lineto

• H = horizontal lineto

• V = vertical lineto

• C = curveto

• S = smooth curveto

• Q = quadratic Bézier curve

• T = smooth quadratic Bézier curveto

• A = elliptical Arc

• Z = closepath

Paths


Moveto

• Moveto instructions can be thought of as picking up the drawing instrument

and setting it down somewhere else. There is no line drawn between the

previous point and the specified point. It is good practice to open all paths with

a Moveto command, because without an initial Moveto, commands will be

executed with the starting point at wherever it happened to be previously,

possibly resulting in undefined behaviour.

• Syntax:

• M x,y where x and y are absolute coordinates, horizontal and vertical respectively.

• m dx,dy where dx and dy are distances relative to the current position, to the right

and down respectively.

Paths


Lineto

• Lineto instructions will draw a straight line. This line moves from the current

position to the specified location. The syntax for a generic Lineto command is

"L x,y" or "l dx, dy" where x and y are absolute coordinates and dx and dy are

distances to the right and down respectively.

• There are also the letters H and V, which specify Horizontal and Vertical

movements. Their syntax is exactly the same as L, including that the lower-

case version is relative rather than absolute.

Paths


Curveto

Curveto commands specify a Bezier curve. There are two types of Bezier

curves:

• Cubic : (C c1x, c2x c1y, c2y x, y) or (c dc1x, dc1y dc2x, dx dc2y, dy )

• Quadratic : (Q cx, cy x, y) or (q dcx, dcy, dx, dy)

Paths


Quadratic : There is a shortcut for stringing together multiple quadratic Beziers, T.

Paths


Arcto

The other type of curved line you can create using SVG is the arc, A. Arcs are

sections of circles or ellipses. For a given x-radius and y-radius, there are two

ellipses that can connect any two points (as long as they're within the radius of the

circle). Along either of those circles there are two possible paths that you can take

to connect the points, so in any situation there are four possible arcs available.

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

Paths


ClosePathThe ClosePath command will simply draw a straight line from the current position to

the first point in the path. It is the simplest command, and takes no parameters. It will take the

shortest linear path to the starting point, intersecting other paths if they fall in the way. The

syntax is "Z" or "z", and both will react exactly the same.

Fills & Strokes


Fill sets the color inside the object

Stroke sets the color of the line drawn around the object

Color

Fill & Stroke Css

Fills & Strokes


• width

• height

• path commands

• d

Can't be set through CSS

The SVG specification decides strictly between attributes, that

are properties and other attributes. The former can be

modified with CSS, the latter not.

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

Fills & Strokes attributes


• stroke

• stroke-width

• stroke-linecap

– butt

– square

– round

• stroke-dasharray

– number,number,number

…

• stroke-opacity

• fill

• fill-opacity


Fills & Strokes Use?

Gradients


Linear Gradient

Radial Gradient

Linear Gradient

• Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ

• Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ

• Angular gradients are created when x1 and x2 differ and y1 and y2 differ

Gradients


Radial Gradient

• cx, cy, r, fx, fy

• Center and Focal point

• cx, cy, r, fx, fy : 0.25 = 25%

• spreadMethod

• pad

• repeat

• reflect

Patterns


Like gradients, the <pattern> element should be put in

the <defs> section of your SVG file.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/pattern


Patterns

Patterns


patternUnits="userSpaceOnUse“

patternContentUnits="objectBoundingBox"

Animation


<set>

<animate>

<animateTransform>

<animateMotion>

<animateColor>

Animation


Set

The set element is the simplest of the SVG animation

elements. It simply sets an attribute to a certain value after a

specific time interval has passed. As such, the shape is not

continuously animating, but just changes attribute value once.

<set

attributeName="r" attributeType="XML" to="100" begin="0s“

/>

Animation


Animate

The animate element is used to animate an attribute of an

SVG shape.

<animate

attributeName="cx" attributeType="XML" from="30" to="470"

begin="0s" dur="5s" fill="remove" repeatCount="indefinite"

/>

Animation


Animate Tranform

The <animateTransform> element can animate the

transform attribute of a shape. The <animate> element cannot

do that.

<animateTransform

attributeName="transform" type="rotate" from="0 100 100" to="360

100 100" begin="0s" dur="10s" repeatCount="indefinite"

/>

Animation


Animate Motion

The <animateMotion> element can animate the

movement of a shape along a path.

It can also rotate the shape to match the slope of the path,

like a car driving up and down hill.

<animateMotion

path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s"

repeatCount="indefinite" rotate="auto"

/>


Texts

<text> Bringing text into an SVG image

<text>

x dy

dxy

rotate


Texts<svg viewBox = "0 0 200 200" version = "1.1">

<text x = "10" y = "25" fill = "red" transform="rotate(30 20,40)" font-size = "15">

Example

</text>

<text x="0" y="0" dx = "10" dy = "40" fill = "blue" transform="rotate(30 20,40)" font-size = "15">

Example

</text>

</svg>


Texts -TextPath• In addition to text drawn in a straight line, SVG also includes the ability to place

text along the shape of a <path> element.

• To specify that a block of text is to be rendered along the shape of a <path>, include

the given text within a textPath element which includes an xlink:href attribute with a

reference to a <path> element.


Transformations

• Translation

• Rotation

• Embedding SVG in SVG

• Skewing

• Scaling

• Complex transformations with matrix()

• Effects on Coordinate Systems


Transformations

Translation

• It may be necessary to move an element around, even though you can position

it with the according attributes. For this purpose, the translate()transformation

stands ready.

• translate(x,y)


Transformations

Rotation

• rorate(degrees)

• This example shows a square that is rotated by 45 degrees.


Clipping• Clipping refers to removing parts of elements defined by other parts.

• In this case, any half-transparent effects are not possible, it's an all-or-nothing

approach.

• <clipPath >

• clip-path="url(#...)"


SVG Image Tag


Tools for SVG

• Inkscape

https://inkscape.org

• Adobe Illustrator

http://www.adobe.com/products/illustrator

• Apache Batik

http://xmlgraphics.apache.org/batik/

https://inkscape.org/

http://www.adobe.com/products/illustrator

http://xmlgraphics.apache.org/batik/


Reference

• http://www.w3schools.com/svg/default.asp

• http://tutorials.jenkov.com/svg

• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

• https://developer.mozilla.org/en-

US/docs/Web/API/SVGAElement

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

http://www.w3schools.com/svg/default.asp

http://tutorials.jenkov.com/svg

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

https://developer.mozilla.org/en-US/docs/Web/API/SVGAElement


THANK YOU FOR YOUR ATTENTION!


Graphics 2D SVG

Software

Transcript of Graphics 2D SVG