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
Then just give it a different size in CSS?
srcset is for serving up different images
Again I would personally let it size it self inside the container 😄
ok, thanks, I will
so the gives the dimension to the container and the svg take the 100% of him(container)?
I remove the
with and height from the svg and I got this issue
in the .svg file it self?
yes
did you remove the viewBox too? cause you won't wanna do that
but in the svg inline
let me check
SVG's are a infinite canvas so it needs to know the
viewBoxmy logo dosen't have a viewbox 😢
just
with and heightwell then fix it 😄
viewBox="0 0 400 104.4" and remove the height/width
if you used the OMGsvg you have settings on the right* to control which stays too
but it would have rounded all those points 😄mi svg has
width="86" height="26", What would be his viewport?https://codepen.io/pen/?editors=1000 this is my logo .svg
gotta hit save
so you can get away with
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 26">
first two values are the placement x,y
second two are the viewBox point width height
just keep in mind its not always a ez conversion like that xD you just happen to have the original height/widthIsn’t there some kind of equation with the height you want it to be e.g. 50px?
I believe you divide viewbox 86/26 * 50 = width but don’t quote me on it
There is no conversion that I know of, cause its based on the paths/design points in the svg it self.
You can just read the points though xD
I'm not that kinda wizard really but it can get me there in a pinch
Read points to get the dimensions for width and height ?
Hmm interesting , that sounds tedious haha
d="M85.072
So when I saw the path start like this I knew it was close to the width/height they had set already
so like the issue you see them have above is because its a SVG that is filling and no viewBox its going to define it self to that width/height.
But the points only draw to the defined values right? so its giving them a viewBox much larger than the design itself.
basically like setting viewBox="0 0 300 150"
but the paths only draw to 85 if that makes any sense? Sorry I'm hungry and tired xD
I basically think of it as a infinite canvas and the viewBox is just that a view "box"
Sidenote: SVG are overflow: hidden; by default but you can also overwrite and have svg viewBox* overflow 🧠Yea that makes sense. I don’t know all the path point “attributes” (not sure what they are called) except for m a h v l and z.
Thanks for the explanation, I’m really trying to understand an master svgs and all the possible tags (linearGradient, symbol, defs, g, transform etc) this year.
Get some food and rest!!