svg queries
Hey, i have a few questions about how svgs behave regarding my codepen:
1. what causes the space underneath the svg? I've heard that svgs are inline-block/inline in some browsers however i've given it a
display: block; and this still occurs. This disappears and appears when the svg is different widths.
2. in the second example what causes the svg to be a different height to the path adding extra space above it?
3. if an svg has no inline width/height set on the tag, e.g. <svg width="x" height="y"></svg> (and a max-width: 100%; in some situations), will it always scale proportionately without excessive stretching or not filling space no matter what width it is? For example, excessive stretching without proportion or not filling the full space space could be an issue when creating fancy underlines for text using pseudo elements or other decorative elements like the wave in my codepen.
Thanks in advance. https://codepen.io/deerCabin/pen/GRbJyWG18 Replies
1. inline-block elements line up to the baseline of text (the space below is reserved for the descender part of a typeface)
2. your viewbox has a height of 320. when i look at your path, it is vertically drawn between 107 and 320. so everything between 0 and 107 is empty
3. Not completely sure what you mean. But for scaling there are a few attributes you can look at to handle the aspect-ratio: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio. Also, always make sure you have a viewbox setup, everything within the svg will be drawn relative to that.
MDN Web Docs
preserveAspectRatio - SVG: Scalable Vector Graphics | MDN
The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
Ah thank you for the info
1. How would I remove that space? Offset the svg with a negative margin or translate?
2. If you donβt mind me asking, how do you see where that it is?
3. When you say always make sure to have a view box setup, are you referring to
viewbox=βxyzβ, the width and the height, or both?The first SVG has a viewbox with maximum y of 185, but the code uses coordinates that are 184 plus some fractional number. None of the coordinates actually go to 185.
i can see what you're talking about in the svg, but i don't understand what that does?
The coordinates of the shapes are not reaching the bottom of the available space, so you have a gap. The full viewbox's space is allocated for the image. If you don't use part of the viewbox, that becomes a visible space.
ohh i see now, so to fix it, you'd change the 184 and fractional number to 185?
That will reduce the gap substantially. You might still have a tiny gap due to rounding errors.
ah so it's a bit hit and miss depending on how the svg you have is made as to whether it doesn't fill the whole viewbox? and if the rounding error gap is bothersome i assume you could just give the svg a negative translate value of like 1px to hide it?
Filling the whole viewbox can be guaranteed if you either use the correct numbers when writing by hand or you use the tools correctly in a vector image editing program. The remaining hairline gap that might occur could be fixed with a translate or negative margin, but such fixes are rarely needed, because this is only a problem when placing two separate images next to each other. Typically, everything would be part of the same svg.
ah okay i see. In my codepen the example i was trying to demonstrate would be a section in the shape of a wave, but the div isn't an image and it still leaves a hairline gap?
An svg isn't an img tag, but it's still an image. That is what I meant when I said image.
oh okay i see. How did you figure out the numbers weren't matching? Is there a tip to scanning through all those numbers to see that sort of thing and pinpoint the problem?
I looked at the viewbox and checked for any numbers that were very close to the maximum y value.
ah okay, and one last thing, in the viewbox, which numbers represent x, y and i'm not sure what the other two are?
They are in order of minimum x, minimum y, maximum x, maximum y
ah, and if you set the minimum x and y does that just limit the size it can get to?
These are coordinates and not sizes. There is no actual unit associated with the coordinates.
oh i see, thank you for your help