SS_Rebelious February 2016

How to define SVG to render both fill and stroke?

I have an SVG-file which code is provided below and it has fill and stroke parameters. I use this SVG in external app (Mapnik) where I modify it to change number of parameters like fill colour, stroke colour and stroke shape. Unfortunately even when I view this SVG in a simple viewer, only either fill or stroke is rendered, depending on which is defined first. I tried to reorder <g> tags and place </g> at different places but wasn't able to achieve the goal - render both fill and stroke at the same time. How should I modify the SVG code to get the desired result?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="22.5778mm" height="22.5778mm"
 viewBox="0 0 64 64"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<title>SVG Vector primitive</title>
<desc>An SVG drawing created by the QSvgGenerator </desc>
<defs>
</defs>

<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(20,0,0,20,32,32)"
font-family="Helvetica" font-size="12" font-weight="400" font-style="normal" >
<g fill="none" stroke="black" stroke-width="0.2" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >

<path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M-0.224514,-0.309017 L-0.951057,-0.309017 L-0.363271,0.118034 L-0.587785,0.809017 L0,0.381966 L0.587785,0.809017 L0.363271,0.118034 L0.951057,-0.309017 L0.224514,-0.309017 L0,-1 L-0.224514,-0.309017"/>
</g>
</g>
</svg>

Answers


Bobby Orndorff February 2016

You have nested <g> elements where each <g> element defines both fill and stroke. The fill and stroke of the inner <g> element will take priority. In your example, the inner <g> element has fill="none" and stroke="black". Thus, no fill is painted (as Robert Longson pointed out in the comments). If you reversed the order of the <g> elements then the inner element would have fill="#000000" and stroke="none". In that case, no stroke would be painted.

If you want to define the fill and stroke at different levels of <g> elements then remove the "none" setting on the inner <g> element so that it does not over write the corresponding setting on the outer <g> element. For example...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="22.5778mm" height="22.5778mm"
 viewBox="0 0 64 64"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<title>SVG Vector primitive</title>
<desc>An SVG drawing created by the QSvgGenerator </desc>
<defs>
</defs>

<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(20,0,0,20,32,32)"
font-family="Helvetica" font-size="12" font-weight="400" font-style="normal" >
<g stroke="black" stroke-width="0.2" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >

<path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M-0.224514,-0.309017 L-0.951057,-0.309017 L-0.363271,0.118034 L-0.587785,0.809017 L0,0.381966 L0.587785,0.809017 L0.363271,0.118034 L0.951057,-0.309017 L0.224514,-0.309017 L0,-1 L-0.224514,-0.309017"/>
</g>
</g>
</svg>

Post Status

Asked in February 2016
Viewed 1,628 times
Voted 4
Answered 1 times

Search




Leave an answer