Compare and contrast raster and vector graphics
Create SVG elements in the DOM
Draw lines using SVG
Create groups of SVG elements
Draw rectangles, polygons, and circles using SVG
Write text on SVG
Draw general paths on SVG
Use D3 to build an SVG bar chart
Raster
Vector
6x Zoom
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
</svg>
CodePen: http://bit.ly/2sHIM0C
Line Attributes
x1 - x-coordinate of first endpoint
y1 - y-coordinate of first endpoint
x2 - x-coordinate of second endpoint
y2 - y-coordinate of second endpoint
Math class
SVG
Larger Numbers
Larger Numbers
Larger Numbers
Larger Numbers
(0,0)
(0,0)
short for "group"
lets us combine elements that should share attributes or functionality
rect Attributes
x - x-coordinate of upper-left corner
y - y-coordinate of upper-left corner
width - width of rectangle
height - height of rectangle
stroke - border color
stroke-width - border thickness
fill - interior color
CodePen: http://bit.ly/2sHIM0C
more rect Attributes
rx - round corner in x direction
ry - round corner in y direction
polygon Attributes
points - space-separated list of points representing vertices of the polygon
points are of the form "x1,y1 x2,y2, ..."
circle Attributes
cx - x-coordinate of center
cy - y-coordinate of center
r - radius of circle
CodePen: http://bit.ly/2vq5aw9
text Attributes
x - x-coordinate of lower-left corner
y - y-coordinate of lower-left corner
more text Attributes
Starry starry SVG.
Starry starry SVG.
dx
Starry starry SVG.
dy
CSS Properties
Starry starry SVG.
text-anchor
Starry starry SVG.
Starry starry SVG.
start
middle
end
CSS Properties
Starry starry SVG.
alignment-baseline
Starry starry SVG.
Starry starry SVG.
hanging
middle
baseline
CSS Properties
transform
rotate(degree x,y)
degree of rotation
point to rotate around
CodePen: http://bit.ly/2sHIM0C
line
circle
rect
polygon
path
An Example
<path d="M16 32
C24.837 32 32 25.163 32 16C32 6.837 24.837 0 16 0
C7.163 0 0 7.163 0 16C0 24.837 7.163 32 16 32
ZM16 3C25.18 3 29 8.82 29 16C29 23.18 23.18 29 16 29
C8.82 29 3 23.18 3 16C3 8.82 8.82 3 16 3
ZM16 18.711C19.623 18.711 23.070 17.748 26 16.057
C25.545 21.633 21.215 26 16 26
C10.785 26 6.456 21.629 6 16.053
C8.93 17.744 12.377 18.711 16 18.711
ZM8 11C8 9.343 8.895 8 10 8C11.105 8 12 9.343 12 11
C12 12.657 11.105 14 10 14C8.895 14 8 12.657 8 11
ZM20 11C20 9.343 20.895 8 22 8C23.105 8 24 9.343 24 11
C24 12.657 23.105 14 22 14C20.895 14 20 12.657 20 11Z"
/>
d Attribute commands
Move command
Line command
Uppercase vs lowercase
UPPERCASE X Y - X and Y represent the location you want to go to
lowercase X Y - X and Y represent how far you want to go from your current position
Uppercase vs lowercase example
<path
d="M 400 100
L 500 300
L 300 300
L 400 100"
stroke="purple"
stroke-width="3"
/>
Uppercase
<path
d="m 400 100
l 100 200
l -200 0
l 100 -200"
stroke="purple"
stroke-width="3"
/>
Lowercase
line command shortcuts
curve commands
quadratic curve
Q cx cy, x y
Control point
Destination
X, Y
X, Y
CX, CY
CX, CY
CX, CY
cubic bezier curve
C cx1 cy1, cx2 cy2, x y
Control point 1
Destination
Control point 2
circular arc
A rx ry rotate largeArc sweep x y
x radius
y radius
???
Destination
Code: http://bit.ly/2uDvYtg
Live Site: http://bit.ly/2uflY8q
x coordinate
0
25
50
75
100
y coordinate
SVG height
bar height
SVG height - bar height