SVG Element disappears when spacing/padding is enabled

I’ve run into an issue when trying to add padding to an SVG Element where it disappears as soon as I turn on spacing (margins & padding). I’ve uploaded the document to my Elements Cloud account: DisappearingSVG.elements.

Before (without spacing enabled):

After (with spacing - margins & padding enabled):

This is a standard CSS issue - If an SVG does not have an explicit width and height property set, it will sometimes collapse to 0 width or height.

I checked your SVG and the size was set to auto, so setting margin to auto makes the SVG resize 0…

To fix this you just need to give your SVG a width value.

That’s great if you want a specific width, but it’s not overly helpful if you simply want the SVG to fill (partially or fully) the container, ie: 100% width (or any other percentage). Begin able to set width using relative units/percentages is really helpful when creating responsive designs as width can be controlled by parent sizes.

Any chance relative units/percentages (ie: w-1/2, w-[40%], etc.) can be added to the sizing properties?

Yup, you can already do this, css values are supported :smiling_face: just put in 100% on the width for example.

If you want to use Tailwind specific classes, put those in the advanced settings.

Ah… you need to ‘uncheck’ the ‘theme’ icon to get the input field. Not very intuitive, but it works. Thanks!

IMHO the inspector still needs some love. :stuck_out_tongue_winking_eye:

Haha, it’s still on the list, and I still have your mockups as a reference :wink:

1 Like

Do you still have the Sketch file? If so, any chance you could send it to me as I seem to have misplaced it.

Of course, here’s a link to it in Sketch Cloud :smiling_face:

1 Like