Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Erik Valerian
PLUS
Erik Valerian
Courses Plus Student 4,921 Points
Posted by Erik Valerian
Erik Valerian
Courses Plus Student 4,921 Points

Hi there, I got a problem. I wanna use svg as ::before element, but I can not give it a width and height..

.servis-lyzi::before {
  content: url(../img/gg_gear%20N7%20D0.78%20P9%20PA18%20@100.svg);
  width: 20px;
  height: 20px;
  display: inline-block;
}

and it appears in orginal size! Maybe I am somewhere wrong...

Thanks for tips /Erik

3 Answers

ilithya
ilithya
19,818 Points
ilithya
ilithya
19,818 Points

Hi Erik Valerian

shame it didn't work.

As I haven't tried yet myself SVGs via a CSS pseudo element, I have a few suggestions for you.

All the time I use SVGs, I either place them completely in the HTML as follows:

<!DOCTYPE html>
<html>
<body>

<svg class="svg" width="20" height="20">
  <circle class="svg__circle" cx="10" cy="10" r="5" />
</svg>

</body>
</html>

or in the CSS as:

.svg {
  width: 40px;
  size: 40px;
  background-image: url('the-svg-image.svg');
  background-repeat: none;
  background-position: 0 0;
}

In either of those 2 options you could easily manipulate the color and size of the SVG via CSS:

.svg {
  fill: red; /* Manipulates SVG color */
  stroke: blue; /* Manipulates a border color */
  stroke-width: 2px; /* Manipulates a border width */
  width: 80%; /* Option 1 to resize */
  height: 80%; /* Option 1 to resize */
  background-size: 100px 100px; /* Option 2 to resize */
}

Now there's a whole technique for best performance using those SVGs as Data URI's.

Take a look at these 2 articles, which I often refer to when working with SVGs:

And I hope that either of my suggestions or those 2 articles can help you further.

Happy coding!

Erik Valerian
Erik Valerian
Courses Plus Student 4,921 Points
Erik Valerian
Erik Valerian
Courses Plus Student 4,921 Points

Hi ilithya,

thank you for your help, now I know what way to go in ordert it work for me... now I added svg and styled it...

Many thanks. /Erik

ilithya
ilithya
19,818 Points
ilithya
ilithya
19,818 Points

Hi Erik Valerian

Have you tried resizing it via "background-size" ? I haven't tried this myself, but it might work. And you might still want to keep the width and height.

Say adding this:

.servis-lyzi:before {
    background-size: 20px 20px;
}
Erik Valerian
PLUS
Erik Valerian
Courses Plus Student 4,921 Points
Erik Valerian
Erik Valerian
Courses Plus Student 4,921 Points

Hi Ilithya, thanks for answer, but it does not work, only think what works is to scale down it in svg file itself... strange, same with.... so looks the HTML:

Hi Ilithya, thanks for answer, but it does not work, only think what works is to scale down it in svg file itself... strange, same with.... so looks the HTML:

//// <div class="left-sloupec-1 cerny-ramec white-backg "> <div class="red-background cerveny-ramec"><a>Služby</a></div> <div class="pod-kategorie"> <li><a class="servis-lyzi">Servis lyží</a></li> <li><a>Půjčovna lyží</a></li> <li><a>Ceny servisu</a></li> <li><a>Lyze</a></li> <li><a>Lyze</a></li> <li><a>Lyze</a></li> <li class="last-a"><a>Ceny půjčovného</a></li> </div> </div> //////

I can not change the color of the svg, its strange...

Thanks for help /Erik