Manipulating external svg file style properties with CSS

by

This is in my opinion the greatest flaw in svg: sandboxing.

Svg files are sandboxed: in their own document, which is why a typical ‘fill:’ style will not apply. Likewise, the css you write in your svg will not apply to the rest of your site.

Adding css directly to an svg: Not a good solution as you will end up rewriting the css in every svg you use.

The real solution: An “icon-system”. Svg font-face or svg sprites. Read more about them here.

The reason opacity works: Opacity applies to the svg object/frame itself, not the contents of the svg (which are inaccessible).

I should also note that no matter how you load those svg’s, inline, by reference, in an object, as a background, you will not be able to get inside the sandbox. This is why converting them to a font or using sprites is necessary for using hover, focus, and other effects/transitions.

More Related Contents:

  1. Fill SVG path element with a background-image
  2. How to modify the fill color of an SVG image when being served as background image?
  3. SVG drop shadow using css3
  4. How to create a circle with links on border side
  5. How to apply a style to an embedded SVG?
  6. SVGs not scaling properly in IE – has extra space
  7. Add a background image (.png) to a SVG circle shape
  8. border curved css – circle with curved end
  9. How to style SVG with external CSS?
  10. html/css hexagon with image inside
  11. Setting transform-origin on SVG group not working in Firefox
  12. Responsive CSS Trapezoid Shape
  13. Circular percent progress bar
  14. Linking to CSS in an SVG embedded by an IMG tag
  15. Creating a ‘New’ spiky label with 24 or above point burst
  16. How to cut a circular part from an image?
  17. How to calculate required hue-rotate to generate specific colour?
  18. Making an svg image object clickable with onclick, avoiding absolute positioning
  19. How to change SVG color when it is an encoded CSS background image?
  20. Draw double curved item with beveled edges
  21. How to get rid of extra space below svg in div element
  22. How to get ScrollBars in SVG?
  23. CSS transform origin issue on svg sub-element
  24. div with triangle at the bottom with background image
  25. Css hover sometimes doesn’t work on svg paths
  26. How do I create a teardrop in HTML?
  27. Create a Reverse Clip-Path – CSS or SVG
  28. Internet Explorer and clip-path
  29. How to curve the div from bottom with image background
  30. svg background image position is always centered in internet explorer, despite background-position: left center;

Leave a Comment