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,2) is the first point (111,50) is the second point and so on
- 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. Theid
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 usingfill="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. Theid
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 usingfill="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
andheight
: Size of the pattern tile.
fill="url(#imgPattern)"
: Applies the pattern fill to the<rect>
element.
Output: