What is SVG in HTML5?
HTML5 SVG is an alternative to Canvas. In simple terms, SVG helps in creating 2 Dimensional vector graphics for the website. The full form of SVG is Scalable Vector Graphics and it depicts the image or its related object in XML format which is like a special text format.
Vector Graphics are made using line, points, and arc by using some mathematical formula. It is also a W3C recommendation.
Along with SVG, the other file formats which use Vector Graphics are PDF and EPS.
On the other hand, Images like PNG, GIF and JPEG uses Raster Graphics. Raster Graphic is also called as Bitmap Image, and they use pixels(set of dots), unlike Vector Graphics.
Vector Graphics VS Raster Graphics
|Vector Graphics||Raster Graphics|
|Consists of XML format using line, points & arc.||Consists of Pixels format like dots.|
|Smaller in size.||Bigger in size than vector graphics.|
|If you Zoom in the image, the quality of the image is not lost after scaling.||The quality of the image is lost after zooming.|
|Examples of Vector graphics are SVG, PDF and EPS.||Examples of Raster graphics are PNG, APNG, JPEG, MPEG4, and GIF.|
|Famous tools based on Vector Graphics are Adobe Illustrator & CorelDRAW.||Famous tools based on Raster Graphics is Adobe Photoshop.|
|When to use – Use this for Logo Design, Line art, Graphs, Flyers, Business Card, Brochure etc||When to use – Use this for photos, collage, Background image etc.|
|Good for print||Not so good for Print compared to Vector|
In the below Image, you will notice that if you zoom in a Raster Image like PNG, JPEG or GIF, then the image becomes blurry and the quality is reduced while Vector Image like SVG does not have an impact on its quality even on Zoom in.
Advantages of HTML5 SVG - Why to use
- If you scale the SVG image, it will not lose its quality at any resolution
- Normally, the image size is smaller
- You can also animate the SVG image using animation
How to create SVG on a web page
To embed SVG inside a web page, you can use the <svg> tag.
Using this tag, you can hold the SVG graphics so it is the container for SVG.
To draw HTML5 SVG containing Texts, you should use the <text> element inside your SVG.
Set these attributes –
- x – The x-coordinate of the starting point of the text
- y – The y-coordinate of the starting point of the text
- Setting the width and height of the SVG is optional but often a good idea
<text x=”x-pos” y=”y-pos”> Text… </text>
HTML5 SVG Rectangle
To draw a Rectangle inside SVG, you should use the <rect> element inside your SVG.
Set these attributes –
- x – The x-coordinate of the top left corner
- y – The y-coordinate of the top left corner
- width – The width of the rectangle
- height – The height of the rectangle
In the below example, the <fill> is optional. This sets the color of the rectangle as darkred.
<rect x=”x-top-left” y=”y-top-left” width=”w-val” height=”h-val” />
SVG Rectangle With Text
Now, we are going to combine the <rect> element with the <text> element to create text inside the rectangle of SVG.
SVG Rounded Rectangle
Just code the <rx>, <ry> or both the elements to create rounded corners for X point and y point respectively.
To draw a circle inside HTML SVG, you should use the <circle> element inside your SVG.
Inside this element, you need to set these attributes –
- cx – The x-coordinate of the center of the circle
- cy – The y-coordinate of the center of the circle
- r – The radius of the circle
In the below example, the radius of the circle is 30% relative to the SVG so if you change the width and height values of SVG, the area of the circle will also change.
To fix the radius irrespective of the SVG width and height values, you can use a fixed value of radius like r:”120″.
<circle cx=”x-center-val” cy=”y-center-val” r=”radius-val”/>
HTML5 SVG Circle With Text
Let us combine the <circle> and <text> element to create text inside the circle of SVG.
SVG Half Circle
Can you create a half circle inside the SVG?
Just set the width and height of the SVG and keep on changing the values of cx, cy and r values in such a way that the value of cx, cy and r should not be enough to create a full circle.
The stroke property adds a stoke color(outline color). Optionally, you can use the stroke-width property to set the width of the stroke.
<svg stroke=”stroke-color” stroke-width=”s-width”>
The <line> element creates line inside your SVG.
Set these attributes –
- x1 – The x-coordinate of the starting point of a line
- y1 – The y-coordinate of the starting point of a line
- x2 – The x-coordinate of the ending point of a line
- y2 – The y-coordinate of the ending point of a line
- stroke – To create a stroke
<line x1=”x-start-pos” y1=”y-start-pos”
HTML5 SVG Path is a very detailed topic in itself.
The commands below are in Capital letter as well as small letters. The Capital letters will be for absolute position while the lower letters will be for relative position
|Here is list of SVG Paths Commands and Description|
moveto – to set a new initial point and a moving current point. You must code the moveto at the start of the first data segment. There can be multiple moveto to start another subpath. Parameters – (x y)+
lineto – Draw a line using (x,y) coordinate. Parameters – (x y)+
Horizontal lineto – Draw a horizontal line using x coordinate. Parameters – x+
Vertical lineto – Draw a vertical line using y coordinate. Parameters – y+
curveto – Draw cubic Bézier curve. Parameters – (x1 y1 x2 y2 x y)+
shorthand/smooth curveto – Draw smooth cubic Bézier curve. Parameters – (x2 y2 x y)+
quadratic Bézier curveto. Parameters – (x1 y1 x y)+
shorthand/smooth quadratic Bézier curveto. Parameters – (x y)+
elliptical arc – To draw an elliptical curve using x-axis, y-axis, rx, ry,
rotation, large-arc-flag, and sweep-flag. Parameters – (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
closepath – To close the SVG path. Parameters – None
Example of SVG Path
Using the above commands, let us create another SVG path or arc.
To rotate the element inside the SVG, we can use the transform=”rotate(x, y, angle)”.
<element… transform=”rotate(x, y, angle)”/>
All the modern browsers support SVG but some old browsers might not support it so you should code a fallback typically in form of text to display the text for those browsers who do not support SVG.
In the example below, the text “Your browser does not support SVG elements” will be displayed in the browser in case your browser does not support SVG.
The HTML5 SVG <image> element can embed the Raster graphical image inside the SVG image. A Raster graphic is also called a Bitmap image like PNG, APNG, JPEG, GIF & MPEG4.
HTML5 SVG Triangle
The SVG <polygon> element helps to create polygon objects like triangle, star, pentagon, hexagon, octagon, etc.
Suppose, you wish to create an SVG triangle, then you should set the x & y coordinates of 1st, 2nd and 3rd angles of the triangle.
<polygon points=”x1,y1 x2,y2 x3,y3″/>
Let us create a star using the SVG <polygon> element. In this case, you have to set the x & y coordinate of the 1st, 2nd, 3rd, 4th and 5th angle.
<polygon points=”x1,y1 x2,y2 x3,y3 x4,y4 x5,y5 “/>
Now, we are going to create multiple SVG Polygon objects like a pentagon, Hexagon, and Octagon.
To create Pentagon, set the x,y coordinates of 5 angles.
For Hexagon, set the x,y coordinates of 6 angles.
And for Octagon, we need set x,y coordinates of 8 angles.
The meaning of Poly is multiple so Polyline means multiple connected lines.
It is easy to create SVG Polyline using the <polyline> element. You must set the x & y coordinate of each connected multiple points of the line.
<polyline points=”x1,y1 x2,y2 … xn,yn“/>
The SVG <ellipse> element create ellipse.
To create the SVG, you must set the center of the ellipse and the radius along x and y axis.
Set these attributes –
- cx – X-coordinate of the center of the ellipse
- cy – Y-coordinate of the center of the ellipse
- rx – Radius of the ellipse along X axis
- ry – Radius of the ellipse along Y axis
<ellipse cx=”x-center” cy=”y-center”
The SVG element can help to create a smooth texture of colors in a linear way which is called a linear SVG gradient. This must contain an id attribute to refer it later.
We can create a vertical gradient as well as a horizontal gradient. Another way is to create a SVG gradient in the same direction as to how SVG is defined.
The must always be nested inside the element. The element helps to embed the properties and definition of an SVG object that can be reused inside an SVG object.
There are 2 types which decide the stopping offset position to create linear SVG gradients. Each contains a to apply a particular color.
Optionally, you can set for each to set the opacity between the stop points.
It is better to set these attributes for the element –
- x1 – X-coordinate of the starting point of the SVG to define the SVG linear gradient
- y1 – Y-coordinate of the starting point of the SVG to define the linear gradient
- x2 – X-coordinate of the end point of the SVG to define the linear gradient
- y2 – Y-coordinate of the end point of the SVG to define the linear SVG gradient
Similarly, the radial gradient creates textures of colors in a circular way. The SVG is used for this purpose. This element should also contain an id attribute to refer it later. In this case –
- x1 – X-coordinate of the center of the SVG radial gradient
- y1 – Y-coordinate of the center of the radial gradient
- x2 – X-coordinate of the focal point of the radial gradient
- y2 -Y-coordinate of the focal point of the radial gradient
The SVG <filter> element is used to create effects like blur effect, highlight effect, drop shadow effect, morphed image, color matrix etc.
The <filter> element must be present inside the <defs> element which in turn is wrapped inside the <svg> element.
Inside the <filter> element, you can use any of these filters –
- feDropShadow – Create a drop shadow
- feMorphology – Create a morphed image
- feColorMatrix – The color matrix helps to create a color matrix on the SVG image
- feGaussianBlur – The Gaussian Blur can be used to blur the SVG image
The stdDeviation controls the density of the filter. For example – If you want to apply a blur effect and you have a higher number for stdDeviation, then the SVG will have more blur effect.
The result attribute is optional. It is the output of the filter and can act as an input to any other filter.
Let us blur an SVG object using the feGaussianBlur.
SVG Clip Path
The SVG <clipPath> is used to clip an SVG object based on the path which it selects. The image inside the path is visible while the clipped part is not visible.
This element must contain an id attribute to refer it for clipping.
The SVG <mask> element is similar to the clip path that creates a mask on the SVG object. This always contains an id attribute
Now, using the mask id, another SVG object/image can use this mask.
Example of SVG Mask
Animate the SVG object, using the following elements –
- <animate> – To animate a particular property of SVG object
- <animateTransform> – To animate the transform property of SVG element
- <animateMotion> – To animate along the motion i.e. follow along the path of the motion
The SVG <viewbox> can be used to redefine the coordinates inside an SVG.
Suppose, the initial width of the SVG object is 340px and height is 240px.
Now, let’s draw a rectangle inside the SVG whose width is 40 and height is 30px and x,y is 5,3.
Now, if you set –
viewbox: 0 0 68 48 on the SVG, that means the x & y coordinate of the viewbox are 0 each. The width of viewbox is 10px while height of the viewbox is 20px.
This means 1 unit of coordinate inside SVG will occupy 340/68 =5px width and 240/48 = 5px height.
So, indirectly x coordinate of the rectangle will be at 40*5 = 200px while y coordinate of the rectangle will be at 30*5=150px.
SVG Fill Color With CSS
You can style the SVG object using CSS(Cascading Style Sheets).
You can style the properties of SVG like <fill>, <stroke> etc using CSS.
If you do not know about CSS, then click on this link which will lead you to out CSS Tutorial Page.