You can nest SVG elements (#tilPost)

Recently I heard in a podcast that nesting SVGs is valid. ?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- some SVG content -->
    <svg>
        <!-- some inner SVG content -->
    </svg>
<svg>

I was surprised and started googling. I found two fantastic posts by Sara Soueidan.

So this learning includes "only" two bookmarks for myself. Honestly, read and bookmark them, too. The articles Sara writes are always excellent.

Reply to Stefan

Print Share Comment Cite Upload Translate

CITATION GOES HERE CITATION GOES HERE

Select a language:

<div class="markdown">Recently I heard in a podcast that nesting SVGs is valid. ?
<pre class="language-html"><code class="language-html"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
 <svg>
 
 </svg>
<svg>
</code></pre>
I was surprised and started googling. I found two fantastic posts by <a href="https://twitter.com/SaraSoueidan">Sara Soueidan</a>.
So this learning includes "only" two bookmarks for myself. Honestly, read and bookmark them, too. The articles Sara writes are always excellent.
<ul>
<li><a href="https://www.sarasoueidan.com/blog/mimic-relative-positioning-in-svg/">Mimic Relative Positioning Inside an SVG with Nested SVGs</a></li>
<li><a href="https://www.sarasoueidan.com/blog/nesting-svgs/">Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports</a></li>
</ul>
</div>

<hr>
 <a href="mailto:stefanjudis@gmail.com?subject=Re%3A%20You%20can%20nest%20SVG%20elements">
 Reply to Stefan
 </a>

First name:

Last name:

Related Posts