The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SVG styling problems with use and xlink

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #193746
    Brian Meyer

    Hi all,

    In Chrome (not FF, Safari), I’m unable to style an externally linked (xlink:href) SVG’s sub-elements by class/ID/element reference.

    Styles inline the demo.svg#my-icon do work.


    <svg class=“my-svg"><use xlink:href=“demo.svg#my-icon”  /></svg>


    <svg xmlns="” xmlns:xlink="">
        <symbol id=“my-icon" viewBox="0 0 21 21">
           <title>Mobile Navigation Button</title>
           <path class=“fml” fill=“#BADA55" d=“M27.493....”/>


    .my-svg { fill: pink; } /* will work <em>/
    #my-icon { fill: brown; } /</em> won’t work in Chrome <em>/
    .fml { fill: green; } /</em> won’t work in Chrome */

    I’ve posted a more detailed demo here:

    Chris Coyier

    See how the <path> has a fill attribute? That’ll mean that the only way to change the fill color on it is if you target it directly and change it. No other fill color can cascade to it. But any CSS will beat it. The .fml selector should work, and if it doesn’t, something else is wrong.

    Chris Coyier

    And don’t apply styling to a <symbol> I’d say is a good rule of thumb. They have ID’s just so you can reference them later in a <use>, but the symbol essentially turns into another <svg>. Your best bet for styling is to style the shape elements themselves, or the <svg> element itself where you use them.

    Brian Meyer

    Thanks for the feedback Chris, buutttt.

    I’ve tried all of your recommended permutations.

    I pulled the inline styles out of the demo.svg file so you have something like:

    &lt;path class=“fml” d=“M27.493….”/&gt;

    I’ve updated my demo to reflect:
    – no inline styles
    – no targeting of the symbol
    – no targets via the svg.class found in the HTML snippet.
    – only paths are targeted via their class in CSS.

    When that’s done, Chrome falls back to filling the SVG paths as black. FF and Safari render as normal.

    The inability to style the <path> via its .fml class only arrises when using a linked file i.e. demo.svg#my-icon (vs a set of defs the page: i.e. #my-icon)

    – the demo.svg file is in the same web-directory, as there are cross site linking restrictions.
    – Doctype is HTML5: <!DOCTYPE html>

    related but also using in page references like #my-symbol vs demo.svg#my-symbol

    Alessio Carone

    I am having the same problem. is there a solution to this? I use SVG with multiple colors, and referencing with css would be great to reduce the size of the file when colors are the same, instead of hardcode inline in the vectors.


    Glad to read Brian Meyer’s SVG bugz page. I am not alone with this bug \o/
    That said, I am still stuck. Is anyone found a solution?


    This problem even exists today.

    I found one solution though.
    Style both elements, the element inside Symbol, and the USE tag.


    Indeed not working. @Sandeep34, how could you get it to work?


    Think I found a solution… By following the link posted by @Brian, I’ve tried to replace the fill attribute in the svg by fill=”currentColor” and by using the attribute color in my css (fill does not seem to work…), this has indeed worked in Chrome. It seems to work well in Safari and Firefox too.


    If you remove the fill attribute from the actual svg file you will be able to change the fill colour of the symbol/path via css even with a external href path.

    Hover the Heart or Basket icons in the top right for an example


    I was having the same issue for different projects. Today I just got rid of the fill itself in the SVG file and then added it with CSS with a regular class.

    So after running SVGO task there is no fill attribute at all on my svgs.

    Try it.


    So, I was having a problem styling the SVGs in Chrome with CSS because I was using the wrong attribute.

    I was trying to set the color property – when I needed to be setting the fill property – like so:

    .svg {
        fill: #FFF;

    I added fill and everything works great

    I hope this helps someone :)

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.