HTML SVG (Scalable Vector Graphics)

• the SVG tag draws vector-based graphics in HTML via XML format.
• Unlike Canvas they remain scalable and do not lose quality on resizing or when zoomed

Syntax:

<svg width="500" height="500"> </svg>

Common SVG Elements

• Circle: Draw a circle.

Syntax: 

<circle cx="" cy="" radius="" fill="" stroke="" stroke-width="" />

• Rect: Draws a rectangle.

Syntax:

<rect x="" y="" width="" height="" stroke=""  stroke-width=""  fill="" />

• Line: Draws a line.

Syntax: 

<line x1="" y1="" x2="" y2="" stroke="" stroke-width="" />

• Polygon: Draws a polygon.

Syntax:

 <polygon points=" " style="fill: ;  stroke: ; stroke-width: ; fill-rule: ;" />

• Polyline: Draws a series of connected lines.

Syntax: 

<polyline points="" stroke="" stroke-width="" fill="" />

• Path: Draws complex shapes using path data.

Syntax:

<path d="" stroke="" stroke-width="" fill='" />

• Text: Adds text to the SVG.

Syntax: 

<text x="" y="" font-family="" font-size="" fill="b">Hello SVG</text>

• Ellipse: Draws an ellipse.

Syntax: 

<ellipse cx="" cy="" rx="" ry="" stroke="" stroke-width="" fill="" />

Basic Drawing Operation

Basic drawing operations in SVG:

• Rectangle

Example:

<svg width="500" height="500">
  <rect x="50" y="50" width="150" height="100" stroke="black" stroke-width="3" fill="blue" />
</svg>

Output:

• Circle and Ellipse

Example:

<svg width="500" height="500">
  <circle cx="250" cy="250" r="100" stroke="black" stroke-width="3" fill="red" />
  <ellipse cx="250" cy="250" rx="100" ry="50" stroke="green" stroke-width="3" fill="yellow" />
</svg>

Output:

• Line and Polyline

Example:

<svg width="250" height="250">
    <line x1="1" y1="1" x2="500" y2="500" stroke="black" stroke-width="2" />
    <polyline points="1,2 111,50 200,1 600,50" stroke="black" stroke-width="2" fill="none" />
</svg>

Points attribute takes a list of coordinates as in the above example:

1. (1,2) is the first point (111,50) is the second point and so on
2. The points attribute then draws a line between the coordinates

Output:

• Paths

Example:

<svg width="500" height="500">
  <path d="M10 10 H 90 V 90 H 10 L 10 10" stroke="black" stroke-width="2" fill="transparent" />
</svg>

The d attribute defines the shape using various parameters:

1. M

• M stands for "move to."
• 10 10 are the coordinates (x, y) to move the starting point of the path to.
• This command moves the pen to (10, 10) without drawing anything.

2. H

• H stands for "horizontal line to."
• 90 is the x-coordinate to draw a horizontal line to.
• This draws a horizontal line from the current point (10, 10) to (90, 10).

3. V

• V stands for "vertical line to."
• 90 is the y-coordinate to draw a vertical line to.
• This draws a vertical line from the current point (90, 10) to (90, 90)

4. L 

• L stands for "line to."
• 10 10 are the coordinates (x, y) to draw a line to.
• This draws a line from the current point (10, 90) to (10, 10).

Output:

• Text

Example:

<svg width="500" height="500">
  <text x="50" y="50" font-family="Verdana" font-size="35" fill="lightgreen">SVG by Quipoin</text>
</svg>

Output:

• Polygon

Example:

<svg width="500" height="500">
    <svg width="300" height="200">
      <polygon points="100,10 40,198 190,78"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>  
</svg>

Output:

Creating SVG Colour Gradient

• Linear Gradient

Example:

<svg width="400" height="200">
  <!-- Define the gradient -->
  <defs>
    <linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- Use the gradient -->
  <rect x="10" y="10" width="200" height="100" fill="url(#linearGradient1)" />
</svg>

• <defs>: Container for defining reusable elements (like gradients).
• <linearGradient>: Defines a linear gradient. The id attribute is used to reference this gradient.
  • x1, y1, x2, y2: Define the direction of the gradient. In this case, it goes from left (0%, 0%) to right (100%, 0%).
• <stop>: Defines a color stop in the gradient.
  • offset: Position of the stop in the gradient, as a percentage of the gradient vector.
  • style: Defines the color and opacity at this stop.
• <rect>: A rectangle filled with the gradient using fill="url(#linearGradient1)".

Output:

• Radical Gradient

Example:

  <svg width="400" height="200">
    <!-- Define the gradient -->
    <defs>
      <radialGradient id="radialGradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      </radialGradient>
    </defs>
    <!-- Use the gradient -->
    <circle cx="200" cy="100" r="80" fill="url(#radialGradient1)" />
  </svg>
  

• <radialGradient>: Defines a radial gradient. The id attribute is used to reference this gradient.
  • cx, cy: Center of the outer circle of the gradient.
  • r: Radius of the outer circle.
  • fx, fy: Focal point for the gradient, where the color transition starts.
• <circle>: A circle filled with the gradient using fill="url(#radialGradient1)".

Output:

Working with SVG Image

We can embed images in SVG

Syntax:

<svg width="400" height="300">
  <image href="path/to/image.jpg" x="50" y="50" width="300" height="200" />
</svg>

Image can be used as a pattern in SVG :

Example:

  <svg width="400" height="300">
    <defs>
      <pattern id="imgPattern" patternUnits="userSpaceOnUse" width="100" height="100">
        <image href="download.png" x="0" y="0" width="100" height="100" />
      </pattern>
    </defs>
    <rect x="0" y="0" width="400" height="300" fill="url(#imgPattern)" />
  </svg>

• <pattern>: Defines a reusable pattern.
  • id: Identifier for the pattern.
  • patternUnits: Specifies the coordinate system for the pattern. userSpaceOnUse means the pattern's coordinate system is the same as the SVG's.
  • width and height: Size of the pattern tile.
• fill="url(#imgPattern)": Applies the pattern fill to the <rect> element.

Output: