I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these properties to the <symbol> tag in my combined svg file, I discovered that it is not valid svg syntax.
To address this issue with height and width, I decided to include them in the style attribute of the <symbol> tag, as this method is supported. But now I'm facing a new question: how can I incorporate the x and y attributes into the <symbol> tag?
The final svg file consists of a single <svg> element containing multiple <symbol> elements representing different icons.
Here's an example of the original svg file:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
After converting it to a symbol, the file looks like this:
<svg style="display:none;">
<symbol id="circle" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</symbol>
</svg>
In the above code snippet, you can see that width and height are considered invalid attributes for symbols.
To use the symbol in your project, you would typically do so like this:
<svg>
<use xlink:href="#circle" />
</svg>
However, I've noticed that the icon doesn't expand to fit the width and height specified. Even trying to nest an svg within the symbol itself, as shown below, doesn't seem to respect the height and width properties:
<svg style="display:none;">
<symbol id="circle">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</symbol>
</svg>