Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Styling an Image tag in a SVG

I would like to know how to target the below image tag, located in an SVG, and style it externally with CSS.

   <g id="Vector_Smart_Object_xA0_Image_1_" class="trapSVG" >

    <image style="overflow:visible;" width="15" height="15" id="Vector_Smart_Object_xA0_Image" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
    GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZlJREFUeNqcUz1LA0EQfbN3SYwf
    +IEWBpSQRhAtLCy0EWws/QGCP8JKbEUri1QWaiEGLewsbQQb2xQJNoKIQgwqaooEk0t2nDlyEE1C
    jAOzO+x7b3Znd5bQbEZ8zgVmZR6vAhGJyxI/S5yROS1uA7L7SzwWAtY8YHmSzGycKBYBhcvgygNz
    7p5tRvArwU+F+6oCahQ7wNYQ0fqqcUcWyUGCDHoFKImLGDdcw4Wtvn8yn9SA3SCJf2w5yvYwUXnH
    jdjHcD9zeKDJdV1x5Sm/Xq5v8xK9bzhhW2whbHTFlad81TmqlmEzBlo6DEVp9EdVzSZ3gGnj0HnN
    ixaBL1O/iJUlKWKigzgw5SlfdX4CeZP4DBl0Y8pXXXeqNk2jw0OWbVdC5avOT8DA5bWt4kmjP5jy
    lK86P4E0RSoH/kjWKlzqIFZcecpXnVNfz0vQdwu7YAgmToYGW7yI7nxgPd63niftnJSiz4IEegNZ
    WexJs53Kg6NvQi4I8CLznfiVtHHKeji23keB+Uh23xO4SO0+U+Ifn+lf3/lbgAEAuN/KQ8s2cHgA
    AAAASUVORK5CYII=" transform="matrix(0.75 0 0 0.75 913.5 276.75)">
</image>
</g>

</svg>

Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

I am wanting to change the color of the image. I can manipulate it, but not change the color.

Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you. I was thinking it might not be right. I will try and recreate it in illustrator.

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

That's not a typical svg vector drawing. It contains a rasterized (png) image element, which has embedded color information. So the normal methods of setting "stroke" and "fill" colors won't work.

But you may be able to shift the hue using a css filter:

.hueshift {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}