HTML SVG
By Tony
2.19.2024
For a website to be interesting, you not only need to have text and images, you also need graphics and icons. While using images is a way to add icons to your site, HTML SVG (Scalable Vector Graphics) is a better option. It's very flexible, meaning it maintains its resolution when scaling and it's responsive, and it also has many other benefits like animations, small file size, and customization.
In the above example, we introduced 4 new tags: <svg>, <rect>, <circle>, and <text>, along with an <img> tag, and several new attributes.
- SVG: The <svg> tag acts like a container, telling the browser all the code inside these tags is part of the SVG image's code.
- Rect: The <rect> tag, wrapped inside the <svg> tags, tells the browser that there's a rectangle in the SVG, with a height and a width of 200 pixels, is filled with the color blue, and has a roundness of 20 pixels, as specified in the attributes.
- Circle: Same with the <rect> tag, <circle> tag tells the browser there's a yellow-filled circle with a radius of 80 pixels (r attribute), and the center of that circle is placed 100 pixels right (cx attribute) and 100 pixels down (cy attribute) to the top left corner of the SVG.
- Text: A straightforward tag, meaning the text within a SVG image. Fill atrribute defines the text color, font-size defines the font size, and the x and y attributes tell the browser that the text is placed 55 pixels right and 115 pixels down to the top left corner of the SVG.
- Img: This is another way to put SVG on a web page. You can put all the SVG codes into one SVG file (.svg), and then use the <img> tag with the src attribute to display that SVG as in the example above.
Note that this is just a very little portion of SVG introduced. Except for <rect>, <circle>, and <text>, there are still tons of other tags and attributes that can be used in SVG and are more complex. To summarize, there are two ways to put SVG into your web page. One, by putting SVG code directly in your HTML document with different tags, or two, by using an <img> tag to display an external SVG file. If you already have an SVG downloaded, use the <img> tag, otherwise, use inline SVG, as you can have better flexibility and control over the codes.