Q. SVG

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics. Support in in HTML5

<g> a container element to group other SVG elements

a simple example

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

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

Q.Positions

左上角(0,0), 右下角(width, height)

Q. Pixels

In the most basic case one pixel in an SVG document maps to one pixel on the output device

<svg width="100" height="100"> // a simple SVG canvas element with 100x100px

Q. Basic shapes

Rectangles
Circle
Ellipse
Line
Polyline
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/
- pointsa list of points, each point must contain 2 numbers for (x,y) position, 每個數字可用空白或逗號隔開
Polygon

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
- 跟Polyline一樣, 提供點坐標, 自動把第一點跟最後一點連線
Path
- Path is probably the most general shape that can be used in SVG. Using a path element you can draw basically any of the other types of shapes. A simple look at path
<path d="M 20 230 Q 40 205, 50 230 T 90,230"/>

Q. Paths

The <path> SVG element is the generic and the most powerful element to define a shape.

d attribute -> contains a series of commands and parameters used by those commands

All of the commands also come in two variants. An uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates

Line Commands

M x y - Move to (x,y)

L x y - Line to (x,y)

H x - draw a horizontal line to x

V y - draw a vertical line to y

Z - close path - draw a line from current position to the first point

Curve Commands

C - cubic curve

Q x1 y1, x y

(x1,y1) => control point, which determines the slope of the curve
(x,y) => end point

T x y

(x,y) => end point
a shortcut for stringing together multiple quadratic Beziers
This shortcut looks at the previous control point you used and infers a new one from it. It means it works if the previous command was a Q or a T command

<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>

Arcs

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

rx, ry => x-radius, y-radius
x,y => the end point of the stroke

<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

Q. Fills and Strokes attributes

Fill sets the color inside the object and stroke sets the color of the line drawn around the object

<rect x="10" y="10" width="30" height="30" stroke="black" fill="yellow" stroke-width="5"/>

使用CSS

// in home.html
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect height="10" width="10" id="MyRect"/>
</svg>

// in style.css
#MyRect {
  fill: red;
  stroke: black;
}

#MyRect:hover {
   stroke: black;
   fill: blue;
 }

Q. Basic Transformations

All transformations are summed up in an element's transformattribute

Translation

to move an element around

<svg width="40" height="50" style="background-color:#bff;">
    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>

Rotation

to rotate an element

<svg width="31" height="31">
    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>

SVG