How to Style Externally Linked SVGs with CSS?

How to Style SVG with External CSS

When storing SVG graphics externally and accessing them via links, styling them through external CSS can pose a challenge. In this case, the CSS file cannot directly modify the SVG's content.

External CSS Limitations

Your external CSS file, "main.css," will only affect the contents of an SVG if it is included inline in the HTML. This means that the following code snippet:

<a href="http://youtube.com/..." target="_blank">
  <img class="socIcon" src="images/socYouTube.svg" title="View my videos on YouTube" alt="YouTube" />
</a>

won't be affected by the CSS in "main.css."

Applying Styles Within the SVG

To style an SVG stored externally, you need to define the CSS within the SVG file itself. You can use a style tag:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill: red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......."/>
  </g>
</svg>

Alternatively, you could use a server-side tool, such as Nokogiri in Ruby, to update the style tag based on the active style.

Fallback Options

If none of the above solutions is feasible, you can resort to using inline SVGs or creating separate PNGs with different styles.

The above is the detailed content of How to Style Externally Linked SVGs with CSS?. For more information, please follow other related articles on the PHP Chinese website!