Geek Answers Handbook

Using SVG and applying CSS from a stylesheet

So, I looked through several articles and questions here, but not the holy grail.

I have an external file icon.svgand I want to use it in several HTML files and have different sizes and sizes for each use.

I can’t use <object>from what I am collecting, since it does not allow styles from CSS sheets, if you do not reference this sheet from the SVG file itself, what kind of hitting target.

The only way I found how to do this:

<svg class="icon">
     <use xlink:href="icon.svg#symbolid"></use>
</svg>

And CSS is applied. But I can only do this if I add symbolnodes to the SVG file and give them an identifier that I would rather not do.

Also, could it be that this may not be supported in all major browsers?

Any way to achieve this?

Update:

javascript/angularjs, JS. (. )

+4
2

<object> , SVG , , .

, , , .

Angular , , , Angular, , .

: , .

0

1 - CSS

svg, .

HTML

<svg class="icon red">
   <use xlink:href="icon.svg#symbolid"></use>
</svg>

CSS

.icon{
  fill:#000;
}
.red{
  fill:#b00;
}
.blue{
  fill:#ddf;
}

2 - SVG,

svg , .

HTML

<svg class="icon symbol">
   <use xlink:href="icon.svg#symbolid"></use>
</svg>

CSS

.icon{
  fill:#000;
  height:20px;
  width:20px;
}
.symbol{
  height:40px;
  width:40px;
}
.symbol .path1{
  fill:#b00;
}
.symbol .path2{
  fill:#ddf;
}

3 - SVG

DEMO

svg-, css css, svg .

<div class="icon"></div>

.icon{
  display:block;
  height:20px;
  width:20px;
  background: url(icon.svg);
  background-size: 20px 20px;
}

svg , css, , :

.svg40{
  height:40px;
  width:40px;
}
.svg100{
  height:100px;
  width:100px;
}

4 - Inline Svgs ( )

DEMO

svg html, HTTP- .

HTML

html

<div style="height:0;width:0;position:absolute;visibility:hidden;">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="symbolid1" viewBox="0 0 64 64">
  <title>symbol 1</title>
  <path ... />
  </symbol>
  <symbol id="symbolid2" viewBox="0 0 64 64">
  <title>symbol 2</title>
  <path ... />
  </symbol>
</div>

Then you can call svg from anywhere using the svg id.

<svg class="icon"><use xlink:href="#symbolid"/></svg>

CSS

.icon{
    display:inline-block;
    fill:currentColor;
    width:20px;
    height:20px;
}
+1
source

More articles:


All Articles