Guys, this situation, I insert svg through object, but the styles are not set (I mean fill - fill), here's the html code:

<object data="img/Icon/interface.svg" type="image/svg+xml" class="icon"></object>

Here is the picture code:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 253 248"> <path d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0"/><path d="M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0"/></svg>

What am I doing wrong? please tell me the best way to stylize

  • and how do you set fill ? maybe this article will help? - olegatro
  • Well, this is a way in terms of control over svg is not much different from the img tag. Inside svg you cannot reach the document (or document styles). - Alexey Ten
  • is it best to linearly insert and not soar the brain? - SvArt713

1 answer 1

To control the fill color and other attributes in the SVG file, you need to perform several actions:

  1. Remove fill, stroke from svg file. You do not have them.

  2. fill in svg does not inherit the parent properties, therefore it is necessary

add for - path {fill: inherit;}

3.In the svg file add a line indicating the external CSS control file

 ***<?xml-stylesheet type="text/css" href="css/svg.css" ?>***

Sample code below. Added color change of the icon when you hover.

 #journey{ fill:orange; } #journey:hover{ fill:crimson; } path{ fill:inherit; stroke:inherit; } 
 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="svg.css" ?> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="800" height="800" viewBox="0 0 800 800" > <path id="journey" d="M227.699 1.199H25.301c-13.234 0-24 10.766-24 24v197.602c0 13.23 10.766 24 24 24h202.398c13.235 0 24-10.77 24-24V25.199c0-13.234-10.765-24-24-24zm0 24l.008 104.98-40.543-38.078c-2.836-2.66-6.468-4.125-10.226-4.125-4.571 0-8.848 2.145-11.739 5.883l-47.73 61.805c-1.547 2.004-4.027 3.199-6.637 3.199-1.781 0-3.461-.539-4.863-1.566l-31.016-22.653c-3.09-2.254-7.093-3.5-11.269-3.5-4.758 0-9.203 1.551-12.52 4.367l-25.863 21.934V25.199h202.398zm0 0M93.301 96.398c13.676 0 24.801-11.125 24.801-24.801 0-13.671-11.125-24.796-24.801-24.796-13.676 0-24.801 11.125-24.801 24.796 0 13.676 11.125 24.801 24.801 24.801zm0 0"/> </svg>

Everything works the same way when inserting a SVG file, unfortunately I cannot show through <object> , because I cannot connect an external file data="icon.svg"

 <html> <head> <title></title> </head> <body> <div id="container"> <object type="image/svg+xml" data="icon.svg" width="400" height="400"> </object> </div> </body> </html>