Could not fill color in svg file
I am unable to fill color in my svg file. I want the logo to be red on the inside and outside. I changed my "fill" and "stroke" attributes to the color I want, but the result is just a logo with a red border and white filling. Did I miss something?
<?xml version="1.0" encoding="UTF-8"?>
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g id="Background">
<path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/>
</g>
</svg>
source to share
In your icon, what looks like one line that you can fill in is actually a red speech bubble shape with a smaller speech bubble shaped hole. This is a typical scheme for font glyphs and many icon collections.
Your icon consists of a path with two subpaths. One for the outside mold and one for the inside (hole). Each subtrack starts with a path command M
and ends with a Z
path command .
If you want to "fill" the inside of the shape, you must take one of the subpaths and duplicate it. Place it behind the original shape. "For" means earlier in the file.
See below.
<!-- The original icon -->
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g id="Background">
<path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/>
</g>
</svg>
<!-- Modified icon -->
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g id="Background">
<!-- Duplicated sub path with yellow fill -->
<path style="fill:yellow;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z" transform="translate(2.1125, 0.4875)"/>
<path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/>
</g>
</svg>
source to share