HTML SVG
SVG (Scalable Vector Graphics)
SVG defines vector-based graphics in XML, which can be directly embedded in HTML pages. SVG graphics are scalable, and do not lose any quality if they are zoomed or resized:SVG is supported by all major browsers.
What is SVG?
- The acronym for Scalable Vector Graphics is SVG.
- SVG is a specification language for vector-based Web graphics.
- Graphics are defined in XML format by SVG.
- In SVG files, animation is possible for every element and property.
- The W3C recommends SVG.
- SVG is compatible with other standards like JavaScript, DOM, XSL, and CSS.
The < svg > Element
SVG images are contained in the HTML <svg> element.
There are numerous ways to draw pathways, polygons, circles, rectangles, text, and much more in SVG.
SVG Circle
Example
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
SVG Rectangle
Example
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
SVG Rectangle with Opacity and Rounded Corners
Example
<svg width="400" height="180">
<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>
SVG Star
Example
<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>
SVG Gradient Ellipse and Text
Example
<svg height="130" width="500">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</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>
Sorry, your browser does not support inline SVG.
</svg>
Differences Between SVG and Canvas
While Canvas creates 2D visuals instantly (using JavaScript), SVG is a language for defining 2D graphics in XML.
Since SVG is built on XML, all elements are accessible within the SVG DOM. JavaScript event handlers can be connected to SVG images.
Every drawn shape in SVG is stored in memory as an object. A modified SVG object’s attribute may cause the browser to automatically re-render the shape.
It renders the canvas pixel by pixel. Once a graphic is drawn on canvas, the browser forgets about it. The scene must be redrew in its entirety, including any items that the graphic may have obscured, if its position is to be altered.
Comparison of SVG and Canvas
The table below shows some important differences between Canvas and SVG:
| SVG | Canvas |
|---|---|
|
|
svg
scalable vector graphics
vector-based graphics
xml
animation
w3c recommendation
integration
css
dom
xsl
javascript
svg element
svg graphics
svg circle
svg rectangle
svg star
svg gradient
svg vs canvas
canvas drawing
svg dom
svg object
pixel-based rendering
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
Scalable Vector Graphics (SVG) is a powerful XML-based vector image format that has become a W3C recommendation for web-based graphics. Unlike pixel-based formats like JPEG or PNG, SVG uses vector-based graphics that can be scaled to any size without losing quality.
SVG graphics are defined using XML, allowing for easy integration with CSS, the DOM, XSL, and JavaScript. This makes SVG a versatile choice for a wide range of web-based applications, from simple icons to complex interactive visualizations.
Some key features of SVG include the ability to create basic shapes like circles, rectangles, and stars, as well as more complex graphics using paths and gradients. SVG also supports animation, making it a popular choice for web-based animations and interactive content.
When compared to the canvas element, SVG offers several advantages. SVG graphics are vector-based, meaning they can be scaled without quality loss, while canvas uses pixel-based rendering. Additionally, SVG graphics are part of the DOM, allowing for easy manipulation and styling using CSS and JavaScript.
Overall, SVG is a powerful and flexible format that is well-suited for a wide range of web-based graphics and interactive content. Its integration with standard web technologies makes it a valuable tool in the modern web developer’s toolkit.
