2.6.2 base.embedded.svg Scalable vector
A <svg>
element represents an image encoded as a Scalable Vector Graphic.
Example
A svg image that is inline with other text.
Markup: base/embedded/embedded-svg.twig
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>A svg image <span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">xmlns:xlink</span>=<span class="hljs-string">"http://www.w3.org/1999/xlink"</span> <span class="hljs-attr">version</span>=<span class="hljs-string">"1.1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"Layer_1"</span> <span class="hljs-attr">x</span>=<span class="hljs-string">"0px"</span> <span class="hljs-attr">y</span>=<span class="hljs-string">"0px"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"10px"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"10px"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 0 512 512"</span> <span class="hljs-attr">enable-background</span>=<span class="hljs-string">"new 0 0 512 512"</span> <span class="hljs-attr">xml:space</span>=<span class="hljs-string">"preserve"</span>></span><span class="hljs-tag"><<span class="hljs-name">polygon</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"#bdad94"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"#bdad94"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"37.6152"</span> <span class="hljs-attr">stroke-linecap</span>=<span class="hljs-string">"round"</span> <span class="hljs-attr">stroke-linejoin</span>=<span class="hljs-string">"round"</span> <span class="hljs-attr">stroke-miterlimit</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">points</span>=<span class="hljs-string">" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "</span>/></span><span class="hljs-tag"></<span class="hljs-name">svg</span>></span> that is inline with other text.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 50%; max-width: 300px;"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>A svg inside a figure.<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span>
<span class="hljs-tag"><<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">xmlns:xlink</span>=<span class="hljs-string">"http://www.w3.org/1999/xlink"</span> <span class="hljs-attr">version</span>=<span class="hljs-string">"1.1"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"Layer_1"</span> <span class="hljs-attr">x</span>=<span class="hljs-string">"0px"</span> <span class="hljs-attr">y</span>=<span class="hljs-string">"0px"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"300px"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300px"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 0 512 512"</span> <span class="hljs-attr">enable-background</span>=<span class="hljs-string">"new 0 0 512 512"</span> <span class="hljs-attr">xml:space</span>=<span class="hljs-string">"preserve"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">polygon</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"#bdad94"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"#bdad94"</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">"37.6152"</span> <span class="hljs-attr">stroke-linecap</span>=<span class="hljs-string">"round"</span> <span class="hljs-attr">stroke-linejoin</span>=<span class="hljs-string">"round"</span> <span class="hljs-attr">stroke-miterlimit</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">points</span>=<span class="hljs-string">" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">svg</span>></span>
<span class="hljs-tag"></<span class="hljs-name">figure</span>></span>
</span>
Source:
base/embedded/_embedded.scss
, line 35