CODEWITHSUNDEEP
htmlcsssvgfont-awesome
Artur
Artur

Reputation: 217

Style SVG loaded to HTML as content tag with CSS

I have 3 files:

index.html

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
    <i class="logo myRed" aria-hidden="true"></i>
</body>
</html>

style.css

.logo:before {
    content: url("logo.svg");
}
.myRed {
    color: #ff2000;
}

logo.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100">
    <rect id="logo" width="300" height="100" />
</svg>

How to style the SVG that is pointed out in the CSS content property? (eg. color, font-size, ...) - like in FontAwesome.

Upvotes: 2

Views: 2127

Answers (3)

Kaiido
Kaiido

Reputation: 136786

You can't.

CSS content: url(image.ext) is similar to loading your image in a <img> tag. And loading an image in a <img> is under the hood loading it in an isolated document, inaccessible for anyone, and which can't access anything.

FontAwesome doesn't load icons like that, they build font-faces, and then call corresponding characters in the content property, e.g something like "\f07b".
So for the browser, FontAwesome icons are just text, and you can style it like any other text.

To style an SVG through CSS, it needs to be in the same document as your stylesheet (or cloned through <use>).

Ok, there is one hack, which may help you, but I can't tell how well it is nor will be supported:
Lea Verou demonstrated that we can (ab)use the :target CSS selector along with the #elem_id fragment identifier to show specific nodes of an SVG Element or apply specific rules.

In you svg's <style> you can create rules like these ones :

#elem_id_1:target ~ #elem_to_color{
    fill: red;
}
#elem_id_2:target ~ #elem_to_color{
    fill: green;
}

Then in your markup, you just need to have some empty elements placed before #elem_to_color with corresponding ids.

<g id="elem_id_1"></g>
<g id="elem_id_2"></g>
<rect id="elem_to_color"/>

Now when you will load your svg as yourfile.svg#elem_id_1, the first rule will apply and #elem_to_color will be red. If you load it as yourfile.svg#elem_id_2, then #elem_to_color will be green.

This hack allows to have a single svg file, on which we can externally control the rendered styles.

/* a single file for all colors */

.logo::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg);
}

.logo.green::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#green);
}

.logo.red::after {
  content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#red);
}
<!-- logo.svg content
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
  <style>
    #green:target ~ #elem_to_color{
      fill: green;
    }
    #red:target ~ #elem_to_color{
      fill: red;
    }
  </style>
  <g id="red"></g>
  <g id="green"></g>
  <rect id="elem_to_color" width="30" height="30"/>
</svg>
-->

<i class="logo"></i>
<i class="logo green"></i>
<i class="logo red"></i>

Upvotes: 4

Danny Spanos
Danny Spanos

Reputation: 1

A more simplified solution would be the following. The first line of css sets the text color (fill), the second line sets the font properties for the text element and the third line targets the rectangle id (logo) to set the fill.

.logo svg {
  fill: #ff0000;
}
.logo svg text {
  font-size: 45px;
  font-face:Arial,Helvetica;
  font-weight:bold
}
#logo {
  fill:#eee;
}
<div class="logo" aria-hidden="true">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="logo" width="300" height="100" />
    <text x="30" y="50">Text Here</text>
  </svg>
</div>

Upvotes: -1

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

Use these CSS properties:

fill:  /* color */
font-size:   /* font-size */

It will override the original SVG values, as demonstrated below.

.logo svg {
  fill: #eee;
}
.logo svg text {
  font-size: 30px;
}
.myRed {
color: #ff2000;
}
<div class="logo myRed" aria-hidden="true">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="logo" width="300" height="100" />
    <text style=" stroke:black; fill:red;" x="30" y="50" font-size="8">Text Here</text>
  </svg>
</div>

Upvotes: -1

Related Questions