Skip to content
Sign upLog in
← Back to Community

SVG

Profile icon
dfnk

What do you use a <svg></svg> element in html?

Voters
Profile icon
Samuel-AlvesAlv
Profile icon
MANAV0201
Profile icon
dfnk
Comments
hotnewtop
Profile icon
dfnk

@coderash
@mwilki7
@SixBeeps
Could you show me a example?

Profile icon
mwilki7

@dfnk

W3Schools has some pretty good examples
https://www.w3schools.com/graphics/svg_intro.asp
https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_myfirst

Profile icon
SixBeeps

@dfnk
Here's the notification bell, ripped straight out of Repl.it:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path fill="none" d="M0 0h24v24H0V0z"></path> <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"></path> </svg>
Profile icon
dfnk

@SixBeeps
what does the <path> element do?

Profile icon
mwilki7

They are mathematical equations to draw shapes.
Since mathematical equations are independent of screen resolution, they'll look sharp in any aspect ratio.

Pictures are dependent on screen resolution (since they are made up of pixels) so they'll become more blocky the more you zoom in. This is not the case for svg shapes.

Profile icon
coderash

svg's are images that can be infinitely scalable and therefore are never blurry. Very useful for modern websites!

Profile icon
SixBeeps

SVGs are an image format, and the tag draws one.