How to color SVG without path Fill?

Asked

Viewed 478 times

3

Well, I tracked an image and I need to color it. The point is that it is not a geometric shape (T-shirt collar) and I need to give the user the option to color it. However, when exporting svg, the Fill attribute does not appear, which you would use to do this coloring.. How to color this svg? Follows the svg code that is rendered:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  preserveAspectRatio="xMidYMid" width="54" height="37" viewBox="0 0 54 37">
    <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAlCAMAAAA+2eraAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB5lBMVEUAAACzzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB4AAAB1WLE/AAAAoHRSTlMAIrLUfTEBAzmD1n8J9uefVxQjaK3wTNz9051iBxE+c6zkv/vXq4tuUDQhBhs7WHSSueVAvi+hsB/3TlSj0c2lYCmKqSZch8O7mXxKkw7m73gYLGaJl7eBclI4GhLsE1oWCgIEMvnBm8Qn2S17z9sFtd4MLvjF42rzj7xI0hk69F9pr5aIuKQP3eo3/lsLdgiuJJWQepxVp6oVooKYQ6iG+RY0bgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAFxEAABcRAcom8z8AAAIsSURBVDjLY2BgYGBkYmZhZWMgArBzcHJxQ5g83LwLgICPX0AQvx4hYRFRkEqwPjHxBTAgISklzSqDTYesnLyCIlwdSJ/SAlSgrKKqpq6hqSWrzcAuqyOkq6dvYGiEpgaoz3gBGQCoz5AMbSYMDKYSpGvjAPrOjGRd5qBgsrCEcKysbWzxqLWzd4CFmiM4eJ0gPGcGBhdXNzN3LFo8PL28NRm0oTwfSKz4+oF5/gFgXmCQRrBXSKhNGMgkT7XwiMio6BiwjDNEV2wcNDbjIXyjBOQo9vXVTkxCcJMZUlIhyqRhQmxpEIF0fGkrEerxDETqzYSESpYrHm0+0PDIRhLLgYjlBuLUFZUHUeKELJgPdYG9Ly5tBRAFhUUoosUlKIGLAUrLwNISxmjiERBtqeVYdaVXQKQr0SXYqqCxUI1Fl5UkRLKGB0Oqlg8iJRmFIVUHceGCekcsRspBo7MUPTgTc6GpqgGrBxqhsmZo4k1Q8WYcwdUCkU7zRBENyYIIt7Lj0MbWBlFgiJzKyqGBWNPOgAtoM0HzljMsVrUjOyBCnYwMuEEiNFEvsIEFIpSf2sWADxRBc2kZxJ2JpRBudw8DftALjfaOdKA7GVWglvUxEAL9E6BKRSYG2UGZnAR1AeuHSehFyWQidAHBlG4UXVOJqo2AYFo9kq7p7ETqYmBgLYPrmqFNtC4GhpnQAF0wi3i7wAEzG1w3zEkiSRcQzAVWa5OJDQ0kEDNvPi4pAHQb17SBoGL0AAAAAElFTkSuQmCC"
      width="54" height="37"/>
</svg>
html css svg

  • How did you generate this svg? There’s something strange there, it looks like a Base64 inside the svg... As far as I know Base64 has no Fill and I did not allow to change colors like this...

  • @hugocsl is right. You are even using an svg tag, but the content is not referent. Therefore, it is not possible to color.

1 answer

2

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
preserveAspectRatio="xMidYMid" width="130" height="60" viewBox="0 0 130 60">
<desc>
Imagem de gola de camiseta, rasterizada, com opção de colorir.
(feColorMatrix hueRotate)
</desc>
<defs>
<filter id="filter">
<feColorMatrix id="matrix" type="hueRotate" values="0"/>
</filter>
</defs>
<image x="25%" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAlCAMAAAA+2eraAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB5lBMVEUAAACzzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB6zzB4AAAB1WLE/AAAAoHRSTlMAIrLUfTEBAzmD1n8J9uefVxQjaK3wTNz9051iBxE+c6zkv/vXq4tuUDQhBhs7WHSSueVAvi+hsB/3TlSj0c2lYCmKqSZch8O7mXxKkw7m73gYLGaJl7eBclI4GhLsE1oWCgIEMvnBm8Qn2S17z9sFtd4MLvjF42rzj7xI0hk69F9pr5aIuKQP3eo3/lsLdgiuJJWQepxVp6oVooKYQ6iG+RY0bgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAFxEAABcRAcom8z8AAAIsSURBVDjLY2BgYGBkYmZhZWMgArBzcHJxQ5g83LwLgICPX0AQvx4hYRFRkEqwPjHxBTAgISklzSqDTYesnLyCIlwdSJ/SAlSgrKKqpq6hqSWrzcAuqyOkq6dvYGiEpgaoz3gBGQCoz5AMbSYMDKYSpGvjAPrOjGRd5qBgsrCEcKysbWzxqLWzd4CFmiM4eJ0gPGcGBhdXNzN3LFo8PL28NRm0oTwfSKz4+oF5/gFgXmCQRrBXSKhNGMgkT7XwiMio6BiwjDNEV2wcNDbjIXyjBOQo9vXVTkxCcJMZUlIhyqRhQmxpEIF0fGkrEerxDETqzYSESpYrHm0+0PDIRhLLgYjlBuLUFZUHUeKELJgPdYG9Ly5tBRAFhUUoosUlKIGLAUrLwNISxmjiERBtqeVYdaVXQKQr0SXYqqCxUI1Fl5UkRLKGB0Oqlg8iJRmFIVUHceGCekcsRspBo7MUPTgTc6GpqgGrBxqhsmZo4k1Q8WYcwdUCkU7zRBENyYIIt7Lj0MbWBlFgiJzKyqGBWNPOgAtoM0HzljMsVrUjOyBCnYwMuEEiNFEvsIEFIpSf2sWADxRBc2kZxJ2JpRBudw8DftALjfaOdKA7GVWglvUxEAL9E6BKRSYG2UGZnAR1AeuHSehFyWQidAHBlG4UXVOJqo2AYFo9kq7p7ETqYmBgLYPrmqFNtC4GhpnQAF0wi3i7wAEzG1w3zEkiSRcQzAVWa5OJDQ0kEDNvPi4pAHQb17SBoGL0AAAAAElFTkSuQmCC" 
width="54" height="37" filter="url(#filter)"/>
<foreignObject y="65%" width="130" height="21">
<select xmlns="http://www.w3.org/1999/xhtml" 
onclick="matrix.setAttribute('values', event.target.value)">
<option value="0">yellowgreen</option>
<option value="45">mediumseagreen</option>
<option value="90">lightseagreen</option>
<option value="135">skyblue</option>
<option value="180">lightsteelblue</option>
<option value="225">violet</option>
<option value="270">lightpink</option>
</select>
</foreignObject>
</svg>

Browser other questions tagged html css svg

You are not signed in. Login or sign up in order to post.