Fixing a severely broken SVG

Question

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):

On the page (firefox):

Initial view in Inkscape:

In Ubuntu's image viewer:

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?

Answer 1

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

2. Copy using Ctrl+C

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

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

5. Save as a Plain SVG

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

Answer 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.

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.