Converting svg code to .svg image file

Thanks for all the previous help

I searched converting svg code to image file, by adding it into text file and saving as .svg.

The svg code displays the outline of a triangle,on web page, but I see nothing once converted to .svg. If I ‘fill’ a color I see the filled triangle, but I’d just like the image to display the triangle outline (as the code does).

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="40" height="35" viewBox="0 0 190 190">
<polygon class="triangle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon></svg>

What’s the solution?

You need to specify stroke colour, for example (with usual self-closing tag):

<polygon class="triangle" fill="none" stroke="black" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="73.5,62.5 148.5,105.8 73.5,149.1" />

To save as a .svg image file, it seems you just need to have an XML prolog:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="40" height="35" viewBox="0 0 190 190">
<polygon class="triangle" fill="red" stroke="black" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="73.5,62.5 148.5,105.8 73.5,149.1" />
</svg>
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.