SVG and D3

Objectives

  • 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

SVG

  • Scalable Vector Graphics
  • Vector, not raster
  • Raster images use pixels
  • Raster image examples: .gif, .jpg, .png
  • Vector images use lines and curves

Raster vs. Vector

Raster

Vector

6x Zoom

The SVG Element

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

CodePen: http://bit.ly/2sHIM0C

Line Elements

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

Coordinates in SVG

Math class

SVG

Larger Numbers

Larger Numbers

Larger Numbers

Larger Numbers

(0,0)
(0,0)

g Elements

  • short for "group"

  • lets us combine elements that should share attributes or functionality

Rectangles, Polygons,

and Circles in SVG

Rectangle Elements

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

Rectangle Elements

more rect Attributes

  • rx - round corner in x direction

  • ry - round corner in y direction

Polygon Elements

polygon Attributes

  • points - space-separated list of points representing vertices of the polygon

  • points are of the form "x1,y1 x2,y2, ..."

Circle Elements

circle Attributes

  • cx - x-coordinate of center

  • cy - y-coordinate of center

  • r - radius of circle

Text Elements in SVG

Code Example

CodePen: http://bit.ly/2vq5aw9​

Text Element

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

Text Element

CSS Properties

Starry starry SVG.

text-anchor

Starry starry SVG.

Starry starry SVG.

start
middle
end

Text Element

CSS Properties

Starry starry SVG.

alignment-baseline

Starry starry SVG.

Starry starry SVG.

hanging
middle
baseline

Text Element

CSS Properties

transform
rotate(degree x,y)

Text Element

degree of rotation

point to rotate around

Path Elements in SVG

Code Example

CodePen:  http://bit.ly/2sHIM0C

Path Introduction

line
circle
rect
polygon
path

Path Element

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"
/>

Path Elements

d Attribute commands

  • M (move)
  • L (line)
  • Z (close path)
  • Q (quadratic Bezier curve)
  • C (cubic Bezier curve)
  • A (circular arc)

Move command

  • Syntax: M X Y
  • Moves the cursor to position X, Y
  • Does not draw anything

Path Elements

Line command

  • Syntax: L X Y
  • Draws a line from the cursor's current position
  • The line will end at position X, Y
  • Can be chained together to draw multiple line segments

Path Elements

Uppercase vs lowercase

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

Uppercase vs Lowercase

<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

Path Elements

  • Z / z - close the path with a line
  • H / h - draw a horizontal line
  • V / v - draw a vertical line

curve commands

Path Elements

  • Q - quadratic curve
  • C - cubic bezier curve
  • A - circular arc

quadratic curve

Path Elements

Q cx cy, x y

Control point

Destination

Path Elements

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

Path Elements

A rx ry rotate largeArc sweep x y

x radius

y radius

???

Destination

YOUR

TURN

And Introduction to

SVG and D3

Code Example

Code: http://bit.ly/2uDvYtg

Live Site: http://bit.ly/2uflY8q

Bar Chart Example

x coordinate

0

25

50

75

100

Bar Chart Example

y coordinate

SVG height

bar height

SVG height - bar height

YOUR

TURN

SVG and D3

By Elie Schoppik

SVG and D3

Introduction to SVG and D3

  • 2,783

More from Elie Schoppik