HTML SVG Basics
Advantages of SVG:
The advantages of using SVG over other image formats (like JPEG and GIF) are:
- SVG images can be created and edited with any text editor.
- SVG images can be searched, indexed, scripted, and compressed.
- SVG images are scalable.
- SVG images can be printed with high quality at any resolution.
Differences between HTML SVG and HTML Canvas:
HTML SVG |
HTML Canvas |
---|---|
SVG is a language for describing 2D graphics in XML |
Canvas draws 2D graphics, on the fly with JavaScript |
If attributes of an SVG object are changed, the browser can automatically re-render the shape |
Canvas is rendered pixel by pixel. In Canvas, once the graphic is drawn, it is forgotten by the browser. |
SVG is resolution-independent |
CANVAS is resolution-dependent. |
SVG supports event handlers |
CANVAS doesn’t have support for event handlers. |
Example 1: Implementation of SVG to draw line
HTML
<!DOCTYPE html> < html > < body > < h2 >Welcome To w3wiki</ h2 > < svg height = "250" width = "600" > < line x1 = "10" y1 = "10" x2 = "400" y2 = "400" style = "stroke:rgb(0,0,255);stroke-width:3" /> </ svg > </ body > </ html > |
Output:
Example 2: Implementation of SVG to draw Circle
HTML
<!DOCTYPE html> < html > < body > <!-- html svg tag is used here --> < svg width = "200" height = "200" > < circle cx = "80" cy = "80" r = "50" stroke = "black" stroke-width = "2" fill = "grey" /> </ svg > </ body > </ html > |
Output:
Example 3: Implementation of SVG to draw Rectangle
HTML
<!DOCTYPE html> < html > < body > <!-- html svg tag is used here --> < 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 > |
Output:
Example 4: Implementation of SVG tp draw Rounded Rectangle
HTML
<!DOCTYPE html> < html > < body > <!-- html svg tag is used here --> < svg width = "400" height = "380" > < rect x = "80" y = "20" rx = "20" ry = "20" width = "150" height = "150" style="fill: orange; stroke: black; stroke-width: 2; opacity: 0.5" /> </ svg > </ body > </ html > |
Output:
Example 5: Implementation of SVG to drawStar
HTML
<!DOCTYPE html> < html > < body > <!-- html svg tag is used here --> < svg width = "300" height = "200" > < polygon points = "100,10 40,198 190,78 10,78 160,198" style="fill: grey; stroke: orange; stroke-width: 5; fill-rule: evenodd" /> </ svg > </ body > </ html > |
Output:
Example 6: Implementation of SVG to draw a Logo
HTML
<!DOCTYPE html> < html > < body > <!-- html svg tag is used here --> < svg height = "300" width = "700" > < defs > < linearGradient id = "grad1" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%" > < stop offset = "0%" style="stop-color:white; stop-opacity: 1" /> < stop offset = "100%" style="stop-color: green; stop-opacity: 1" /> </ linearGradient > </ defs > < ellipse cx = "200" cy = "100" rx = "120" ry = "80" fill = "url(#grad1)" /> < text fill = "#ffffff" font-size = "22" font-family = "ARIAL" x = "120" y = "110" > w3wiki </ text > </ svg > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome 15
- Edge 12
- Firefox 1
- Opera 14
- Safari 6
Contact Us