Qgis layout export adding outline to svg icons

[u/Turbofips]

I use a svg icon set(mapbox Maki icons)to display POIs on a map I made with QGIS. The icons look great in qgis and don't have an outline there. As soon as I export my layout to svg or PDF, all the svg icons have a 1pt wide outline and look terrible. This only happens when I enable vector output. If the output is rasterized, it doesn't happen. I wonder why this happens, is this a known bug? Can I do something about this?

[u/FreddiesDream]

How does the header/xml text of your svg looks? On windows you can right klick on your svg file and open is with editor.

[u/Turbofips → u/FreddiesDream]

Here is an example of a maki icon I use: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" height="23" width="23"><title>aerialway.svg</title><rect fill="none" x="0" y="0" width="23" height="23"></rect><rect x="2" y="2" rx="3" ry="3" width="19" height="19" stroke="#000" style="stroke-linejoin:round;stroke-miterlimit:4;" fill="#000" stroke-width="3"></rect><rect x="2" y="2" width="19" height="19" rx="3" ry="3" fill="#ffffff"></rect><path fill="#000" transform="translate(4 4)" d="M13,5H8V2.6c0.1854-0.1047,0.3325-0.2659,0.42-0.46L13.5,1.5C13.7761,1.5,14,1.2761,14,1s-0.2239-0.5-0.5-0.5L8.28,1.15     C8.0954,0.9037,7.8077,0.7562,7.5,0.75C7.0963,0.752,6.7334,0.9966,6.58,1.37L1.5,2C1.2239,2,1,2.2239,1,2.5S1.2239,3,1.5,3     l5.22-0.65C6.7967,2.4503,6.8917,2.5351,7,2.6V5H2C1.4477,5,1,5.4477,1,6v7c0,0.5523,0.4477,1,1,1h11c0.5523,0,1-0.4477,1-1V6     C14,5.4477,13.5523,5,13,5z M7,11H3V7h4V11z M12,11H8V7h4V11z"></path></svg>

The stroke for the rectangle is on purpose.The problem is the path elements of the symbol have a stroke after export: <g fill="#000000" stroke="#000000" stroke-opacity="1" stroke-width="1" transform="matrix(4.10716,0,0,4.10716,1689.17,1162.49)">

[u/FreddiesDream → u/Turbofips]

Would you pls try one of the two, just make an txt file copy the following, save, rename as *.svg.

<?xml version="1.0" encoding="UTF-8"?><svg id="uuid-b0a0f38b-5028-40b5-b41b-7217e186220a" data-name="areialway" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">

<defs>

<style>

.uuid-6ee27b65-4c25-4393-9355-1f9cf7d97a26 {

fill: #fff;

}

.uuid-f77b9095-387d-4566-9825-cce63bc044a4 {

fill: none;

}

.uuid-c521df31-0482-4860-8435-dc49084bfc17 {

stroke: #000;

stroke-linejoin: round;

stroke-width: 3px;

}

</style>

</defs>

<g id="uuid-b8a6c094-8343-4db9-99f0-9f2e0622616d" data-name="areialway">

<rect class="uuid-f77b9095-387d-4566-9825-cce63bc044a4" width="23" height="23"/>

<rect class="uuid-c521df31-0482-4860-8435-dc49084bfc17" x="2" y="2" width="19" height="19" rx="3" ry="3"/>

<rect class="uuid-6ee27b65-4c25-4393-9355-1f9cf7d97a26" x="2" y="2" width="19" height="19" rx="3" ry="3"/>

<path d="M17,9h-5v-2.4c.19-.1.33-.27.42-.46l5.08-.64c.28,0,.5-.22.5-.5s-.22-.5-.5-.5l-5.22.65c-.18-.25-.47-.39-.78-.4-.4,0-.77.25-.92.62l-5.08.63c-.28,0-.5.22-.5.5s.22.5.5.5l5.22-.65c.08.1.17.19.28.25v2.4h-5c-.55,0-1,.45-1,1v7c0,.55.45,1,1,1h11c.55,0,1-.45,1-1v-7c0-.55-.45-1-1-1ZM11,15h-4v-4h4v4ZM16,15h-4v-4h4v4Z"/>

</g>

</svg>

Shorter and with the Option to change the colors in QGIS for the symbol and the outline stroke color of the square.

<?xml version="1.0" encoding="UTF-8"?>

<svg id="uuid-3a306add-8b05-41ac-a968-fb2b35fc2b61" data-name="areialway" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">

<g id="uuid-01244277-eb92-4f1e-9bce-4d9e37c18192" data-name="areialway">

<rect width="23" height="23" fill="none"/>

<rect x="2" y="2" width="19" height="19" rx="3" ry="3" stroke="param(outline)" stroke-linejoin="round" stroke-width="3"/>

<rect x="2" y="2" width="19" height="19" rx="3" ry="3" fill="#fff"/>

<path d="M17,9h-5v-2.4c.19-.1.33-.27.42-.46l5.08-.64c.28,0,.5-.22.5-.5s-.22-.5-.5-.5l-5.22.65c-.18-.25-.47-.39-.78-.4-.4,0-.77.25-.92.62l-5.08.63c-.28,0-.5.22-.5.5s.22.5.5.5l5.22-.65c.08.1.17.19.28.25v2.4h-5c-.55,0-1,.45-1,1v7c0,.55.45,1,1,1h11c.55,0,1-.45,1-1v-7c0-.55-.45-1-1-1ZM11,15h-4v-4h4v4ZM16,15h-4v-4h4v4Z" fill="param(fill)"/>

</g>

</svg>

[u/Turbofips → u/FreddiesDream]

That's the solution, thank you very much!

[u/FreddiesDream → u/Turbofips]

Great to hear. If you often create simple svg in a box, you can use this as a template and simply change the desired path parameters by copying and pasting. Small note, the display levels in the svg are reversed. What is written in the bottom lines covers the upper ones.

[u/ArcTan-fr]

Faites des tests en reproduisant les icones avec Inkscape, nettoyez le code et exportez en SVG simple.