SVG element in HTML5

In the previous lesson, TipsMake joined you in learning about the Canvas element in HTML5 used to draw graphics for the website. Today we would like to introduce one more element with a similar task, also used to draw 2D graphics and graphics applications on the website, which is SVG element. So what content does SVG have, how it is used, what is its difference and what is Canvas? Let's find out with Quantrimang through this article.

SVG element in HTML5 Picture 1

What is SVG?

SVG stands for Scalable Vector Graphics , which is an image format (similar to JPG, PNG, and so on).

SVG is used to draw 2D graphics and graphics applications on the website, mostly useful for vector-style diagrams such as Pie charts, two-dimensional graphs in X and Y coordinates.

SVG is the official standard of the W3C world web organization.

Advantages

1. SVG images can be enlarged but not broken.
2. SVG images can be printed in high quality at any resolution.
3. SVG images can be created and edited with javascript.
4. SVG images can be searched, indexed, compressed, .
5. SVG images can move using built-in animation components.
6. SVG images may contain links to any other document.
7. SVG is mostly supported on all browsers.

Element in HTML

Element in HTML is a container for drawing graphics.

SVG has several methods to draw such as lines, box shapes, circles, text and graphic images .

Draw SVG circle

To draw a circle, we use the card

Draw circles in SVG HTML5

stroke="lightcoral" stroke-width="4" fill="moccasin"

The internal properties are:

1. cx: center position, calculated from the left edge of SVG.
2. cy: mind position, calculated from the upper edge.
3. r: radius.
4. fill: define the fill color.
5. stroke: border.

Result:

SVG element in HTML5 Picture 2

Draw the SVG ellipse

To draw an ellipse we use the card .

Draw ellipse in SVG HTML5

stroke="darkslateblue" stroke-width="4" fill="lightblue"

The same parameters when drawing a circle, add two attributes:

1. rx: radius from center to left edge.
2. ry: radius from center to upper edge.

Result:
SVG element in HTML5 Picture 3

Draw SVG rectangles

You use tags to draw rectangles.

Draw rectangles in SVG HTML5

style="fill:lightcoral;stroke-width:10;stroke:pink"

Result:

SVG element in HTML5 Picture 4

Draw SVG rectangular corners

Use cards to draw.

Draw angled rectangles in SVG HTML5

style="fill:red;stroke:black;stroke-width:5;opacity:0.5"

Result:

SVG element in HTML5 Picture 5

Draw the SVG line

Used to draw straight lines:

Draw straight lines in SVG HTML5

Result:

SVG element in HTML5 Picture 6

Draw folding lines of SVG

Used to draw kinks, in which the points attribute in four points shows the x and y coordinates of the points to be joined together:

Draw kinks in SVG HTML5

points="10,10 80,10 80,80 150,80 150,150 220,150 220,220" 
  fill="pink" stroke="palevioletred" stroke-width="5"

Result:

SVG element in HTML5 Picture 7

Draw stars in SVG

We use tags , in which points determine the x and y coordinates of vertices.

used to draw a closed shape includes straight lines. The end point will connect to the starting point.

Draw stars in SVG HTML5

style="fill:lemonchiffon;stroke:purple;stroke-width:5;fill-rule:evenodd;"

SVG element in HTML5 Picture 8

In addition, it is also used to draw other polygons.

Draw complex SVG shapes

Used to draw complex shapes, the path to draw is defined in attribute d = "way - drawing command"

The commands used in attribute d are:

1. M: move the drawing point to the x and y coordinates (M xy).
2. L: draw from the current point to the point x, y (L xy).
3. H: Draw a horizontal line from the current point to the point where x (H x) is coordinates.
4. V: Draw a vertical line to the point with the y coordinate (y y).
5. C: draw cubic-bezier curve from current point x0, y0 to point x, y. the beginning of the tangent curve to the straight line x0, y0, x1, y1, the second point of the tangent curve to the wall x, y, x2, y2 C x1 y1, x2 y2, x, y.
6. S: draw a smooth curve from the current point x0, y0 to the point x, y in which the first point tangent to the line x0, y0, x2, y2 S x2 y2, x y.
7. Q: Draw cubic-bezier curves from the current point x0, y0 to point x, y. The beginning of the tangent curve to the straight line x0, y0, x1, y1 is the second point of the tangent curve to the wall x, y, x1, y1 C x1 y1, x y.
8. T: draw cubic-bezier curves, from current point to point x, y (T xy).
9. A: draw the arc.
10. Z: close the drawing line.

Draw complex SVG shapes

style="stroke:crimson;stroke-width:3; fill:lightpink"

Result:

SVG element in HTML5 Picture 9

Insert text into SVG

To add text to SVG start at coordinates (x, y) then use .

There are attributes: font-family, font-style, font-weight, font-variant, font-size, font-size, font-size, adjust, kerning, letter-spacing, word-spacing, text-decoration.

Insert text into SVG

style="fill:purple;stroke:indigo;stroke-width:5;"

SVG element in HTML5 Picture 10

Draw SVG shapes with gradient colors

You can use tags or to define a SVG Gradient.

style="stop-color:#ff9999;stop-opacity:1"
style="stop-color:#9933ff;stop-opacity:1" 

SVG element in HTML5 Picture 11

Differences between SVG and Canvas

The comparison table below shows some important differences between Canvas and SVG:

CANVAS SVG

1. Canvas draws 2D graphics with JavaScript.
2. Canvas is displayed as pixels standing side by side.
3. In canvas, when an image has been drawn, it will not be remembered by the browser. If the position of the image wants to change, the whole image will need to be re-drawn including the objects around the graphic object.
4. Depends on the resolution
5. No support in handling events
6. The ability to create images for text is not good
7. You can save the image after drawing it as .png or .jpg
8. Very suitable for graphics games

1. SVG describes 2D graphics in XML
2. SVG is built on XML so all components are available in SVG DOM. You can use javascript to handle the above events for SVG elements.
3. In SVG, each drawn image is stored as an object. If the properties of an SVG object change, the browser will automatically return the result.
4. Not dependent on resolution
5. Support in handling events
6. Suitable for wide image building applications (Google Maps)
7. Build images slowly if graphics are complex (Everything using multiple DOMs is slow)
8. Not suitable for game applications

Okay, so we've finished learning how to use HTML5 graphics drawing canvas and. Hopefully the lesson will be useful for you. Let's wait for the next lesson with TipsMake.

Wish you can design a perfect website!

Micah Soto

Update 25 May 2019