How to style SVG with external CSS

Question

I have several SVG graphics I d like to modify the colors of via my external style sheets - not directly within each SVG file  I m not putting the graphics in-line  but storing them in my images folder and pointing to them   I have implemented them in this way to allow tooltips to work  and I also wrapped each in an  lt a gt  tag to allow a link    lt a href  http   youtube com      target   blank  gt  lt img class  socIcon  src  images socYouTube svg  title  View my videos on YouTube  alt  YouTube    gt  lt  a gt    And here is the code of the SVG graphic    lt  xml version  1 0  encoding  utf-8   gt   lt  xml-stylesheet href  stylesheets main css  type  text css   gt   lt  DOCTYPE svg PUBLIC  -  W3C  DTD SVG 1 1  EN   http   www w3 org Graphics SVG 1 1 DTD svg11 dtd  gt    lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 56 69 56 69  gt   lt g gt       lt path d  M28 44         gt   lt  g gt   lt  svg gt    I put the following in my external CSS file  main css     socIcon g  fill red     Yet it has no effect on the graphic  I also tried  socIcon g path    and  socIcon path      Something isn t right  perhaps my implementation doesn t allow external CSS modifications  or I missed a step  I d really appreciate your help  I just need the ability to modify the colors of the SVG graphic via my external stylesheet  but I cannot lose the tooltip and link ability   I may be able to live without tooltips though   Thanks

User · Answer

I am actually going to change the colors of these images based on what color scheme the user has chosen for my site   - Jordan 10 hours ago   I suggest you to use PHP for this  There s really no better way to do this without icon fonts  and if you resist using them  you could try this    lt  php      header  Content-Type  image svg xml        echo   lt  xml version  1 0  encoding  utf-8   gt         color     GET  color       gt   lt  DOCTYPE svg PUBLIC  -  W3C  DTD SVG 1 1  EN   http   www w3 org Graphics SVG 1 1 DTD svg11 dtd  gt    lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 56 69 56 69  gt       lt g gt           lt path fill   lt  php echo  color    gt   d  M28 44      gt       lt  g gt   lt  svg gt    And later you could use this file as filename php color  ffffff to get the svg file in the desired color

User · Answer

A very quick solution to have dynamic style with an external css stylesheet  in case you are using the  lt object gt  tag to embed your svg   This example will add a class to the root  lt svg gt  tag on click on a parent element   file svg     lt  xml-stylesheet type  text css  href     svg css   gt    lt svg xmlns  http   www w3 org 2000 svg  viewBox    gt     lt g gt      lt path  gt     lt  g gt    lt  svg gt    html     lt a class  parent  gt     lt object data  file svg  gt  lt  object gt   lt  a gt    Jquery      function         document  on  click     parent   function          this  find  object   contents   find  svg   attr  class   selected              on click parent element      lt svg xmlns  http   www w3 org 2000 svg  viewBox    class  selected  gt    then you can manage your css  svg css    path    fill none   stroke  000   stroke-miterlimit 1 41   stroke-width 0 7px      selected path    fill none   stroke rgb 64  136  209    stroke-miterlimit 1 41   stroke-width 0 7px

User · Answer

In my case  I have applied display block in outer class  Need to experiment  where it fits  Inside inline svg adding class and style does not even remove the above white-space  See  where the display block gets applied   lt div class  quot col-3 col-sm-3 col-md-2  front-tpcard quot  gt  lt a class  quot noDecoration quot  href  quot   quot  gt   lt img class  quot img-thumbnail img-fluid quot  gt  lt svg id  quot Layer 1 quot  gt  lt  svg gt   lt p class  quot cardtxt quot  gt Text lt  p gt   lt  a gt   lt  div gt   The class applied     front-tpcard  img-thumbnail          display  block    To hide the blank whitespace in svg          This worked for me  Inner svg class did not worked

User · Answer

leo here is the angularJS version  thanks again   G directive    imgInlineSvg   function       return       restrict    C       scope   true      link   function   scope  elem  attrs              if   attrs src                      attrs   each   function                      var imgID      attrs class                  var imgClass   attrs class                  var imgURL     attrs src                     get   imgURL  function   data                          var  svg       data   find    svg                         if   typeof imgID      undefined                               svg    svg attr    id   imgID                                               if   typeof imgClass      undefined                               svg    svg attr    class   imgClass     replaced-svg                                                 svg    svg removeAttr    xmlns a                          elem replaceWith    svg

User · Answer

You can include in your SVG files link to external css file using    lt link xmlns  http   www w3 org 1999 xhtml  rel  stylesheet  href  mystyles css  type  text css   gt    You need to put this after  opening tag    lt svg gt     lt link xmlns  http   www w3 org 1999 xhtml  rel  stylesheet  href  mystyles css  type  text css   gt     lt g gt       lt path d      gt     lt  g gt   lt  svg gt    It s not perfect solution  because you have to modify svg files  but you modify them once and than all styling changes can be done in one css file for all svg files

User · Answer

One approach you can take is just to use CSS filters to change the appearance of the SVG graphics in the browser   For example  if you have an SVG graphic that uses a fill color of red within the SVG code  you can turn it purple with a hue-rotate setting of 180 degrees    theIdOfTheImgTagWithTheSVGInIt       filter  hue-rotate 180deg       -webkit-filter  hue-rotate 180deg       -moz-filter  hue-rotate 180deg       -o-filter  hue-rotate 180deg       -ms-filter  hue-rotate 180deg       Experiment with other hue-rotate settings to find the colors you want   To be clear  the above CSS goes in the CSS that is applied to your HTML document  You are styling the img tag in the HTML code  not styling the code of the SVG   And note that this won   t work with graphics that have a fill of black or white or gray  You have to have an actual color in there to rotate the hue of that color

User · Answer

I know its an old post  but just to clear this problem    you re just using your classes at the wrong place  D First of all you could use svg   fill  red     in your main css to get it red  This does have effect  You could probably use node selectors as well to get specific paths  Second thing is  you declared the class to the img-tag   lt img class  socIcon       You actually should declare it inside your SVG  if you have different paths you could define more of course   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt  xml-stylesheet href  quot stylesheets main css quot  type  quot text css quot   gt   lt  DOCTYPE svg PUBLIC  quot -  W3C  DTD SVG 1 1  EN quot   quot http   www w3 org Graphics SVG 1 1 DTD svg11 dtd quot  gt    lt svg version  quot 1 1 quot  id  quot Layer 1 quot  xmlns  quot http   www w3 org 2000 svg quot  xmlns xlink  quot http   www w3 org 1999 xlink quot  viewBox  quot 0 0 56 69 56 69 quot  gt   lt g gt       lt path class  quot myClassForMyPath quot  d  quot M28 44         gt   lt  g gt   lt  svg gt   Now you could change the color in your main css like  myClassForMyPath       fill  yellow

User · Answer

When used in an  lt image gt  tag SVG must be contained in a single file for privacy reasons  This bugzilla bug has more details on exactly why this is so  Unfortunately you can t use a different tag such as an  lt iframe gt  because that won t work as a link so you ll have to embed the CSS in a  lt style gt  tag within the file itself   One other way to do this would be to have the SVG data within the main html file i e    lt a href  http   youtube com      target   blank  gt     lt svg id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 56 69 56 69  gt       lt g gt           lt path d  M28 44         gt       lt  g gt     lt  svg gt   lt  a gt    You could style that with an external CSS file using the HTML  lt link gt  tag

User · Answer

What works for me  style tag with  import rule   lt defs gt       lt style type  text css  gt           import url  svg-common css         lt  style gt   lt  defs gt

User · Answer

You can do what you want  with one  important  caveat  the paths within your symbol can t be styled independently via external CSS -- you can only set the properties for the entire symbol with this method  So  if you have two paths in your symbol and want them to have different fill colors  this won t work  but if you want all your paths to be the same  this should work   In your html file  you want something like this    lt style gt     fill-red   fill  red       fill-blue   fill  blue     lt  style gt    lt a href    www example com   gt     lt svg class  fill-red  gt       lt use xlink href  images icons svg example  gt  lt  use gt     lt  svg gt   lt  a gt    And in the external SVG file you want something like this    lt svg xmlns  http   www w3 org 2000 svg  gt      lt symbol id  example  viewBox  0 0 256 256  gt       lt path d  M120       gt     lt  symbol gt   lt  svg gt    Swap the class on the svg tag  in your html  from fill-red to fill-blue and ta-da    you have blue instead of red   You can partially get around the limitation of being able to target the paths separately with external CSS by mixing and matching the external CSS with some in-line CSS on specific paths  since the in-line CSS will take precedence  This approach would work if you re doing something like a white icon against a colored background  where you want to change the color of the background via the external CSS but the icon itself is always white  or vice-versa   So  with the same HTML as before and something like this svg code  you ll get you a red background and a white foreground path    lt svg xmlns  http   www w3 org 2000 svg  gt     lt symbol id  example  viewBox  0 0 256 256  gt       lt path class  background  d  M120       gt       lt path class  icon  style  fill  white   d  M20       gt     lt  symbol gt   lt  svg gt

User · Answer

It is possible to style an SVG by dynamically creating a style element in JavaScript and appending it to the SVG element  Hacky  but it works    lt object id  dynamic-svg  type  image svg xml  data  your-svg svg  gt      Your browser does not support SVG  lt  object gt   lt script gt      var svgHolder   document querySelector  object dynamic-svg        svgHolder onload   function              var svgDocument   svgHolder contentDocument          var style   svgDocument createElementNS  http   www w3 org 2000 svg    style                Now  ab use the  import directive to load make the browser load our css         style textContent     import url   css your-dynamic-css css               var svgElem   svgDocument querySelector  svg            svgElem insertBefore style  svgElem firstChild           lt  script gt    You could generate the JavaScript dynamically in PHP if you want to - the fact that this is possible in JavaScript opens a myriad of possibilities

User · Answer

It should be possible to do by first inlining the external svg images  The code below comes from replace all SVG images with inline SVG by  Jess Frazelle      img svg   each function      var  img     this     var imgID    img attr  id      var imgClass    img attr  class      var imgURL    img attr  src        get imgURL  function data           Get the SVG tag  ignore the rest     var  svg     data  find  svg           Add replaced image s ID to the new SVG     if  typeof imgID      undefined            svg    svg attr  id   imgID                Add replaced image s classes to the new SVG     if  typeof imgClass      undefined            svg    svg attr  class   imgClass   replaced-svg                 Remove any invalid XML tags as per http validator w3 org      svg    svg removeAttr  xmlns a           Replace image with new SVG      img replaceWith  svg

User · Answer

This method will work if the svg is viewed within a web browser but as soon as this code is uploaded to the sever and the class for the svg icon is coded as if it was a background image the color is lost and back to the default color  Seems like the color can not be changed from the external style sheet even though both the svg class for the color and the top layer class for the display and position of the svg are both mapped to the same directory

User · Answer

Your main css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML   https   developer mozilla org en docs SVG In HTML Introduction   lt html gt     lt body gt     lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 56 69 56 69  gt       lt g gt         lt path d  M28 44         gt       lt  g gt     lt  svg gt   lt  html gt    If you want to keep your SVG in files  the CSS needs to be defined inside of the SVG file     You can do it with a style tag   http   www w3 org TR SVG styling html StyleElementExample   lt  DOCTYPE svg PUBLIC  -  W3C  DTD SVG 1 1  EN      http   www w3 org Graphics SVG 1 1 DTD svg11 dtd  gt   lt svg xmlns  http   www w3 org 2000 svg  version  1 1       width  50px  height  50px  viewBox  0 0 50 50  gt     lt defs gt       lt style type  text css  gt  lt   CDATA         socIcon g           fill red                 gt  lt  style gt     lt  defs gt     lt g gt       lt path d  M28 44         gt     lt  g gt   lt  svg gt    You could use a tool on the server side to update the style tag depending on the active style   In ruby you could achieve this with Nokogiri  SVG is just XML  So there are probably many XML libraries available that can probably achieve this   If you re not able to do that  you will have to just have to use them as though they were PNGs  creating a set for each style  and saving their styles inline

User · Answer

For External styles    x000D   x000D   lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 56 69 56 69  gt  x000D   x000D     lt style gt  x000D    import url main css   x000D     lt  style gt  x000D   x000D     lt g gt  x000D       lt path d  M28 44         gt  x000D     lt  g gt  x000D   lt  svg gt  x000D   x000D   x000D     For Internal Styles    x000D   x000D   lt svg version  1 1  id  Layer 1  xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  viewBox  0 0 56 69 56 69  gt  x000D   x000D     lt style gt  x000D        socIcon g  fill red   x000D     lt  style gt  x000D   x000D     lt g gt  x000D       lt path d  M28 44         gt  x000D     lt  g gt  x000D   lt  svg gt  x000D   x000D   x000D    Note  External Styles will not work if you include SVG inside  lt img gt  tag  It will work perfectly inside  lt div gt  tag

[html] How to style SVG with external CSS?

Examples related to html

Examples related to css

Examples related to svg

Examples related to stylesheet

Examples related to external