3

I am unable to fill the color into my svg file. I want the logo to be red inside and outside. I modified my "fill" and "stroke" attributes to the color I want but the output is just a logo with red border and white filling. Am I missing anything?

<?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>
Improve this question
2
  • It looks like that SVG is just a stroke that's been turned into a shape (Or has outlines created if this was made in Illustrator). So based on the string you have (d= "...") , adding in a fill will just fill the inside of the stroke, not the inside of the shape like you want.
    – smilefreak24
    Commented May 25, 2015 at 0:57
  • Please show a mockup of the desired result or behaviour (like a dummy jpg file of output)
    – Max Payne
    Commented May 25, 2015 at 3:25

1 Answer 1

Reset to default
2

In your icon, what looks like a single line that you can fill, is actually a red speech-bubble shape with a smaller speech-bubble-shaped hole in it. This is the typicall arrangment for font glyphs and many icon collections.

Your icon consists of a path with two subpaths. One for the outside of the shape, and one for the inside (the hole). Each subpath starts with an M path command and ends with a Z path command.

If you want to "fill" the inside of the shape, you should take one of the subpaths and duplicate it. Put it behind the original shape. "Behind" 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>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.