Basic of SVG

The Basic Concept

• SVG means Scalable Vector Graphics
• It's XML format
• Every element and every attribute in SVG files can be animated

The Sample of SVG

Circle

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"></circle>
</svg>

1. Define width and height of svg.
2. The inner tag is circle, define it's position by cx and cy.
3. The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0)
4. The r attribute defines the radius of the circle

Rectangular

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

1. The width and height attributes of the element define the height and the width of the rectangle.
2. The style attribute is used to define CSS properties for the rectangle.
3. The CSS fill property defines the fill color of the rectangle
4. The CSS stroke-width property defines the width of the border of the rectangle
5. The CSS stroke property defines the color of the border of the rectangle

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

1. The x attribute defines the left position of the rectangle (e.g. x="50" places the rectangle 50 px from the left margin)
2. The y attribute defines the top position of the rectangle (e.g. y="20" places the rectangle 20 px from the top margin)
3. The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)
4. The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

1. The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)

create a rectangle with rounded corners:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

1. The rx and the ry attributes rounds the corners of the rectangle

ellipse

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50" 
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

1. The cx attribute defines the x coordinate of the center of the ellipse
2. The cy attribute defines the y coordinate of the center of the ellipse
3. The rx attribute defines the horizontal radius
4. The ry attribute defines the vertical radius

line

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50" 
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

1. The x1 attribute defines the start of the line on the x-axis
2. The y1 attribute defines the start of the line on the y-axis
3. The x2 attribute defines the end of the line on the x-axis
4. The y2 attribute defines the end of the line on the y-axis

polygon

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

1. The points attribute defines the x and y coordinates for each corner of the polygon

This creates a polygon with four sides:

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Polyline

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

1. The x1 attribute defines the start of the line on the x-axis
2. The y1 attribute defines the start of the line on the y-axis
3. The x2 attribute defines the end of the line on the x-axis
4. The y2 attribute defines the end of the line on the y-axis

path

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

The following commands are available for path data:

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

fill-rule attribute