Image .svg responsive
I have 1 .svg image of a logo but in the design of the page on mobile the image is larger than on desktop, how can I make it responsive? (That on mobile I charge with the dimensions you need and on desktop the same) declare its height and width in the HTML for good practices
36 Replies
- Make sure the logo doesn't exceed the container width
- Allow the height to adjust proportionally based on the width
- use @media (min-width: 768px) adject .logo-svg Adjust dimensions for larger screens
This is the .svg image, I wanted to achieve something like when using JPG and PNG with picture and srcset but I understand that with .svg it doesn't make sense, any idea?
Something like that
If you are using a SVG for a logo use the* <svg> not <img>
that is its super power.
Best thing for you todo is share a minimal example, that way we can edit the code/help you better.
https://pen.new or bust
Make sure you don't have a
height & width on the root <svg> tag, but do have a viewBox.
This will cause the SVG to fill its containing box.Ok, I will
I think it doesn't make sense do it with a .svg but maybe there is a way o maybe I am wrong, re-size the viewport
https://codepen.io/cmachdev/pen/ZEPJwKG?editors=1000
If you have a SVG logo use all the power
This allows for much better control/scale/quality
I would run that through https://jakearchibald.github.io/svgomg/ or get a better export though its kinda a lot for just flat text..
You can put a width/height attribute in the <svg> too if you wanted to have a "max" or remove it like I did to fill the container its in
then you can define the size of that container or what not have it be responsive that way.
ok, I don't get it so much but I am going to check it, thanks
You've got the same image twice. It's always going to render the same thing.
SVG can scale to any lossless dimensions so you don't need to use picture.
I prefer inline as you can control it all nicely. You can still use <img> but you will need to edit the .svg and remove the "max" height/width attributes.
but I need un desktop has a dimension and on the movile another one
I updated the pen to show you
ok