[Resolved] adjust the size of inline svg according to viewport

[Gerhard]

Hello,
how can I change the width and height of my svg-icon to fit the viewport?
Can I use custom properties?

for instance:

<svg class="icon-tabler icon-caret-left" width="var(--caret-w)" height="var(caret-h)"....></svg)

Greetings from Cologne
Gerhard

[David]

Hi there,

HTML attributes won’t accept CSS variables, you would have to use Javascript for that. But you could just write it to your CSS eg.

.icon-caret-left {
    width: var(--carret-w);
}

[Gerhard]

So I should omit width and height attributes in my html?
Should I adjust the viewBox too?

<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-caret-left" viewBox="0 0 24 24" ...></svg>

css:

:root {

    --caret-w: 24px;
    --caret-h: 24px;
}

svg.icon.icon-tabler.icon-tabler-caret-left
  {
  width: var(--caret-w);
 height: var(--caret-h);
	}

that works.

But this doesn´t work:

@ media screen and (max-width:500px) {
 
  --caret-w: 30px;
   --caret-h: 30px;
 }

[Ying]

Hi Gerhard,

Try this instead:

@media (max-width: 500px) {
     :root {
        --caret-w: 30px;
        --caret-h: 30px;
     }
}

[Gerhard]

Thanks a lot!

My mistake was the space between @ and media.

Greetings from Cologne
Gerhard

[Ying]

And there was no selector :root in your CSS 🙂

[Author]

Posts