SVG: Intro & Overview
SVG or Scalable Vector Graphics is an XML based markup language and is a powerful way to display images. It is widely supported amongst browsers, can infinitely scale because it is built upon XML markup, and is more flexible than JPG or PNG’s we can use CSS and Javascript to interact with them. SVG’s are also easy to animate, see the last example as a teaser of a much deeper rabbit hole of a topic.
Star:
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightblue;stroke:white;stroke-width:5;fill-rule:nonzero;"/>
</svg>Check our Codepen
Ellipse:
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:blue" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:orange" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>Check our Codepen
Shrinking rectangle:
<svg width="250" height="150">
<rect x="10" y="10" width="200" height="150" stroke="orange" fill="orange">
<animate id="animation"
attributeName="width"
attributeType="XML"
from="200" to="20"
begin="0s" dur="5s"
fill="freeze" />
</rect>
</svg>
<input id="js-refresh" type="button" value="Refresh"/>
<script>
const refresh = document.getElementById('js-refresh');
refresh.onclick = function() {
document.getElementById('animation').beginElement();
}
</script>Check our Codepen
- Read the overview on Mozilla here
- Check a good introduction from flaviocopes
- A good guide from CSS Tricks
- SVG tutorial from Mozilla
- SVG book from O’Reilly Media with some great examples can be found here