8

I got my logo from an AI-logo-generating site. It made a decent logo, but the svg is severely borked, to varying degrees depending on what viewer is used...

The specific issue I am having is that the size specified in the svg (i assume) is drastically different from the size of the content, leading to the actual image as shown in Chromium to be 1/4 the size it should be (Firefox renders it as one would want it to be). This is confirmed in Inkscape; the area of the image being much larger than the content.

On the page (chromium):

enter image description here

On the page (firefox):

enter image description here

Initial view in Inkscape:

enter image description here

In Ubuntu's image viewer:

enter image description here

Looks like I can't attach svg's here, so link to it in Git (looks like the Git viewer throws a fit with it):

https://github.com/Epic-Breakfast-Productions/OpenQuarterMaster/blob/031f2423bc02af426aa99afaec0b50dc50db3789/software/open-qm-base-station/src/main/resources/META-INF/resources/media/logo.svg

Currently I am at a loss as to how to approach fixing it... I have tried (with no avail):

  • Inkscape
    • resize to content (changes never hold, plus feels like a workaround)
    • generally playing around with attempts to resize and re export

Is there an easy way to fix my image and keep it as resolute as possible?

2
  • 1
    A possible alternative: I am not very good with image editing software, and once spent hours and hours trying to fix a client's logo. It was significantly better for me to use an online gig service (Fiverr), where I found someone that would take an image and create- I think by tracing- an SVG version (and other formats). They were done before the next day, charged like $7, and the SVG and other formats they delivered were great. There are many people on these websites that offer the same service. I've done it multiple times now, great option for non-graphics people like myself.
    – elmer007
    Aug 17 at 13:33
  • The W3C validator shows some errors, but the only one of concern is the missing doctype - maybe the viewers are using a different SVG spec because of it? If not, this sounds like a bug in the viewer, or rather in the SVG rendering library they're using. Would be nice if you reported it.
    – jaskij
    Aug 17 at 14:31

2 Answers 2

8

The document is a mess structurally, but I've no idea which part is causing the actual problem. There's an unused raster image in there, gradients which are unused, and a far too many unnecessary nested groups. It's truly a horrible mess. It's not worth the time it would take to try to fix the code TBH.

Anyway, here's how you could easily fix it in Inkscape.

  1. Select each object using the Edit Paths by Nodes tool N. Holding down Shift while you click lets you make a multiple selection.

Looks like a mess at this point but don't worry

enter image description here

  1. Copy using Ctrl+C

  2. Do File > New to create a new document, and Paste Ctrl+V

  3. Select everything, and do Edit > Resize Page to Selection.

  4. Save as a Plain SVG

Here's the test in Firefox (left), and Chrome (right). Both render perfectly.

enter image description here

0
2

The file is incredibly complex. I guess someone has developed a parametrizable image and you have got one of the billions possible versions. The automate which generated your version didn't bother to simplify the result, the image contains a heavy and complex overhead which is interpreted differently in different image viewers. No idea who actually makes or has made mistakes.

The structure can be simplified by applying Extensions > Arrange > Deep Ungroup a few times or by patiently ungrouping all groups. Unfortunately also group level definitions and transformations are lost and soon there's something like the version you got in Ubuntu (see NOTE1).

Drawing the same looking SVG manually from scratch would generate much simpler file. It's not a big deal to make one if you know which version you want.

I tried one.

enter image description here

There's only a few combined and simple paths, nothing which resembles the spaghetti of the original.

I had a screenshot of your original as a reference (=locked to bottom). The text shapes are taken from your file after applying once Extension > Arrange > Deep Ungroup to find them.

NOTE1: Ungrouping finally reveals also the geometric shapes. Their proportions were right, but the sizes, placements and colors must be set manually.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.