---
svgname: square
foo-bar: "hyphens-var-test"
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="attributes">
  {% svg files/square.svg  role="navigation" data-foo="bar" fill="#ffffff" stroke=#000000 %}
</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}}" %}
  {% svg /files/square.svg id="test-hyphens" class="{{page.foo-bar}}" %}

</div>

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