---
svgname: square
svgclass: hello
---
Hello world
<div id="base">
{% svg files/square.svg %}
</div>

<div id="height">
{% svg files/square.svg  width=24 %}
{% svg files/square.svg  width=24 height=48 %}
{% svg files/square.svg  width=24 height="" %}
</div>

<div id="path">
  <label>Resolve relative and absolute paths to site's source</label>
  {% svg files/square.svg %}
  {% svg /files/square.svg %}
</div>

<div id="jail">
  <label>Resolve relative and absolute paths to site's source</label>
  {% svg /../files/square.svg %}
  {% svg ../files/square.svg %}
</div>

<div id="interpret">
  <label>Interpret embedded variables</label>
  {% svg /files/{{page.svgname}}.svg %}
  {% svg /files/square.svg id="name-{{page.svgname}}" class="class-{{page.svgclass}}" %}
</div>

<div id="optimize">
  {% svg /files/{{page.svgname}}.svg data-foo="" %}
</div>