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>

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
 ClosePath
The 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.

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.

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/

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

THANK YOU FOR
YOUR ATTENTION!

Graphics 2D SVG

Recommended

Recommended

More Related Content

Similar to Graphics 2D SVG

Similar to Graphics 2D SVG (20)

Recently uploaded

Recently uploaded (20)

Graphics 2D SVG

Editor's Notes