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

Instagram Post