Scaling an SVG in CSS

Question

I have the following line in my stylesheet that calls my website logo.

.navbar__logo::before{
    content: url("../images/logo/logo.svg");}

How can I scale this down? I'm learning a bit about viewPort & viewBox but cant seem to get it to work.

Thanks in advance.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Nov 19 '19 at 10:14

score 0 · Answer 1 · answered Nov 19 '19 at 11:48

After declaring a viewBox in your svg file, you should definitely give your pseudo-element explicit width and height:

.navbar__logo::before {
  content: url("../images/logo/logo.svg");
  width: 200px;
  height: 50px;
}

Beyond that, if you wish to dynamically resize your pseudo-element and / or animate the scaling you can use transform: scale():

.navbar__logo::before {
  content: url("../images/logo/logo.svg");
  width: 200px;
  height: 50px;
  transform: scale(0.5);
}

1 Answers1