Controlling SVG dimensions

Hi there,

Firstly, thanks for choosing to use my plugin.

Sorry, I’m a bit confused though.

You can save your svg in illustrator at any size, as long as the art is on the art board, it will show up. You may just need to set the dimensions in CSS. The white space issue doesn’t make sense to me. You can remove it in illustrator… no need to edit your svg in WordPress when you use illustrator. WordPress doesn’t handle cropping of svg because they aren’t actually images, they’re XML code.

If you can share a link, I can inspect the white space and let you know where it’s coming from.

I’m happy to help you figure it out.

Your plug-in solves the endless problem of pixelated artwork and scalar challenges. I come from the world of print, in which the Moment of Dread commences when the client says, “You need my logo for the brochure? Oh, why not grab it from our website!” If I had a dime for every logo I’ve redrawn in AI, I could retire to the French Riviera.

The white-space issue only crops up if I’ve merged WP header and navigation, and then added the logo to the navigation so it’s part of the menu bar. If I’m adding the logo to a regular header, no problem. (This is in the GeneratePress/GeneratePress Premium theme.) I would suspect some kind of padding, but the white space shows up when I’m trying to add the logo, on the screen on which I’d be cropping it if I could.

I’ve turned off the header/nav merger, so the issue’s moot at this point.

I use the bounding-box trick in AI to control dimensions on artwork for print as well as for online use. The biggest problem I see people run into with the technique is that they forget to override the AI default white fill/black stroke and wonder why there’s an outline around their art. ??

I feel your pain when it comes to the print situations! It was also an issue with web for me, clients would send the most terrible 120px logo they had. Same deal, need to redraw and implement as svg for that crisp vector goodness.

Sounds like you have a lot of experience with svg/AI, that’s awesome. But annoying that it plays up when you merge the Mac and logo though. Glad you found a workaround!

Actually, I have a lot of experience with AI/EPS/PDF; with SVG, not so much.

But if your clients were sending you 120 px logos, lucky you! I’ve had to deal with 72 ppi thumbnails of ornate contraptions that make the average heraldic crest look simple. [Yeah, I know: the classic “my client stories are worse than yours” paradigm! ;-)]

So my workaround works if I skip a specific theme feature, which implies the feature incorporates some padding or something like it. What I’m not sure about, however, is how that padding could appear on the crop-your-logo screen. Hrm…

Haha yeah, I’m happy to give you that one! I’ve primarily been a programmer/developer so I haven’t had too many bad situations with graphics. But they’ve arisen. That sounds like an absolute nightmare. And I’m sure the client was like “that’ll be fine won’t it?” ???♂?

Yeah, that’s strange with the theme feature and cropping screen. I haven’t used the generatepress theme for quite some time and never played with svg in it, so I’m not much help there unfortunately. But I have noticed that some themes implement svg slightly different to my plugin and can cause weird issues with media library thumbnails among other things, so could definitely be something weird going on.

I’ll try to get some time to play with that theme again and see if I can reproduce the issue, but I’m flat out at the moment with multiple big projects. So it could be a while before I get to doing that. I’m definitely interested though and would love to figure out exactly what’s happening there. My inquisitive and analytical self just can’t leave things sometimes haha.