18 replies

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;

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

svg

to be a different height to the

path

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>

<svg width="x" height="y"></svg>

(and a

max-width: 100%;

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/GRbJyWG

CodePenR

svg questions

...