🔰SVG
Scalable Vector Graphics
Last updated
Was this helpful?
Scalable Vector Graphics
Last updated
Was this helpful?
Was this helpful?
browser ⟩ SVG
SVG tags (although can be included within HTML) are XML tags, not HTML tags.
to create SVG elements with JavaScript, can’t use , must use , which takes an XML namespace string (for SVG, it's "http://www.w3.org/2000/svg"
) as its first argument.
💾 https://replit.com/@pegasusroe/SVG-sprite
<!-- ⭐️
`width="0" height="0"` or
`display="none"`
prevent SVG from being rendered
-->
<svg width="0" height="0">
<!-- ⭐️ definitions to be used later -->
<defs>
<!-- ⭐️ `g` for group, much like `div` in HTML -->
<g id="xxx">
<path d="">
<path d="">
</g>
</defs>
<!-- ⭐️ SVG will NOT draw `symbol`, it's just a definition -->
<symbol id="twitter" viewBox="0 0 100 100">
<title>@CoolCompany on Twitter</title>
<svg viewBox="0 0 100 100">
<rect x="10" y="10" width="100" height="100" />
<!-- and all the shapes you need! —>
</svg>
<img src="leaf-maple.svg">
.svg-bg {
background-image: url(bg.svg); /* background image */
}