HTML Tutorial: How to Use SVG In HTML (Everything You Need To Know About SVG)
Apart from HTML5 Canvas, SVG technology also provides for defining graphics on a web page. The full name of SVG is scalable vector graphics.
It is an XML-based image format. SVG is used to draw two-dimensional vector-based graphics on web pages.
The World Wide Web Consortium (W3C) recommends SVG technology to draw graphics on a webpage. SVG provides you with many methods to draw paths, boxes, circles, text and graphics images.
{tocify} $title={Table of Contents}
What is SVG?
SVG stands for Scalable Vector Graphics. It is a file format for creating and displaying vector graphics on the web.
Unlike raster graphics, which are made up of pixels and can become blurry or pixelated when resized, vector graphics are made up of paths, shapes, and lines based on mathematical equations and can be scaled to any size without losing resolution.
SVG is a W3C standard, which means that it is an open, royalty-free format that can be easily created and edited with a variety of tools, including text editors and vector graphics editors.
It is also supported by all modern web browsers, making it a popular choice for web developers looking to create scalable graphics for their websites.
HTML <svg> Element
The HTML <svg> element is used to embed Scalable Vector Graphics (SVG) into an HTML document.
This element is a container for the graphics and its contents can be styled with CSS and manipulated with JavaScript.
An SVG graphic can be defined inline within an HTML document using the <svg> element or it can be linked as an external resource using the <img> element with its src attribute set to the URL of the SVG file.
Here's an example of inline SVG:
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue"/></svg>{codeBox}
This example creates a blue circle with a radius of 40 units and places it in the center of a 100x100 container.
SVG provides many advantages over traditional raster graphics, such as better scalability, smaller file sizes, and improved accessibility and search engine optimization.
SVG Circle
<!DOCTYPE html><html><body><svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="DimGrey" stroke-width="4" fill="DarkOrange"></circle></svg></body></html>{codeBox}
SVG Rectangle
<!DOCTYPE html><html><body><svg width="400" height="100"><rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg></body></html>{codeBox}
SVG Rounded Rectangle
<!DOCTYPE html><html><body><svg width="400" height="100"><rect x="50" y="20" rx="20" ry="20" width="150" height="150"style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /></svg></body></html>{codeBox}
SVG Star
<!DOCTYPE html><html><body><svg width="300" height="200"><polygon points="100,10 40,198 190,78 10,78 160,198"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg></body></html>{codeBox}
SVG Logo
<!DOCTYPE html><html><body><svg height="130" width="500"><defs><linearGradient id="grad1" 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><ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /><text fill="#ffffff" font-size="45" font-family="Verdana"x="50" y="86">SVG</text></svg></body></html>{codeBox}
Differences Between SVG and Canvas
Both SVG and Canvas are web technologies used for creating graphics and visualizations on the web. However, there are some key differences between the two:
- Vector vs Raster: SVG is a vector graphics format, meaning that it uses mathematical equations to describe shapes and lines. Canvas, on the other hand, is a raster graphics format, meaning that it uses pixels to represent graphics.
- Scalability: Because SVG uses mathematical equations to describe its graphics, it can be scaled to any size without losing resolution. Canvas graphics, being pixel-based, can become blurry or pixelated when resized.
- Interactivity: Canvas provides a powerful and flexible environment for creating interactive graphics, including animations and games. SVG can also be made interactive, but it requires a more complex implementation, typically using JavaScript.
- Text: SVG provides excellent support for text, including the ability to select and style text using CSS. Canvas, being pixel-based, does not have native support for text, and creating and styling text in Canvas can be challenging.
- Accessibility: SVG is inherently more accessible than Canvas, as it is easily selectable and its contents can be easily read by assistive technologies such as screen readers. Canvas, being an image, does not provide this level of accessibility.
In general, SVG is better suited for situations where scalability, text, and accessibility are important, while Canvas is better suited for situations where interactivity and performance are critical.
Comparison of Canvas and SVG
| Feature | Canvas | SVG |
|---|---|---|
| Technology type | Raster | Vector |
| Scalability | Poor | Good |
| Interactivity | Good | Fair |
| Text rendering | Poor | Good |
| Accessibility | Poor | Good |
| Animation | Good | Fair |
| File size | Small | Large |
| Z-index (overlapping elements) | Limited | Good |
| Integration with other technologies | Good | Good |
Scalability: Canvas graphics can become blurry or pixelated when resized, while SVG graphics can be scaled to any size without losing resolution.
Interactivity: Canvas provides a powerful and flexible environment for creating interactive graphics, including animations and games. SVG can also be made interactive, but it requires a more complex implementation, typically using JavaScript.
Text rendering: SVG provides excellent support for text, including the ability to select and style text using CSS. Canvas, being pixel-based, does not have native support for text, and creating and styling text in Canvas can be challenging.
Accessibility: SVG is inherently more accessible than Canvas, as it is easily selectable and its contents can be easily read by assistive technologies such as screen readers. Canvas, being an image, does not provide this level of accessibility.
Animation: Canvas provides good support for animation, but creating animations in SVG can be more complex, as it requires the use of JavaScript to manipulate the individual elements.
File size: Canvas graphics tend to have smaller file sizes than equivalent SVG graphics, due to the simpler nature of the graphics being stored as pixels.
Z-index: Canvas has limited support for overlapping elements, meaning that it can be difficult to create overlapping visual elements. SVG, being vector-based, provides good support for overlapping elements.
Integration with other technologies: Both Canvas and SVG can be easily integrated with other technologies such as CSS and JavaScript, and both provide good support for building complex graphics and visualizations.
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML SVG Graphics.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
