2

While I was looking at some designs of some websites, I came across a beautiful SVG background:

https://www.algolia.com/lp/img/hero/hero-magento.svg

I wanted to inspect it so I downloaded it. By no means I want to use it my own works. I would only like to look on how it is done technically so maybe I can use the same technique.

However, as soon as I opened it in Inkscape, I do not see the original image, but just the blue background:

enter image description here

Why does does the blue background appear when I open it with Inkscape? How can I view it as I see it in the browser? Is there some kind of protection of which I am not aware of? If so, how does it work? (maybe I can use it too for my own SVG files...)

I repeat, I don't want to steal anything; I just want to take a look and see how it is done to learn something new.

  • Make sure you have the last InkScape version installed – Danielillo Apr 27 at 18:39
  • I will check now, do you see it correctly on your Inkscape? – tonix Apr 27 at 18:48
3

I could make the pattern visible this way:

  • I loaded the svg in Inkscape 0.92.4 and only saw that dark blue background form.
  • I set the view to Outline. That made the shapes visible.
  • Inkscape said the drawing was a group of two objects, so I selected everything and ungrouped.
  • Inkscape said that the irregular shapes were a group of 5 objects, masked in root.
  • I removed the mask and ungrouped.
  • The regular shape was obviously in front of the irregular ones, so I sent it to the back.

And now all was fine.

  • Thank you for your explanation. It worked! – tonix May 11 at 16:52
2

Analyzing SVG files

SVG files are finally plain text. A person who has programmer's thinking and knowledge can read it for ex. with text editor. I skip it.

Analyzing the SVG code and knowing how different application programs interpret the code is the only way to understand it properly. Checking the layer- and object structure tree in a graphic program isn't primary information, it's already interpreted once.

Inkscape, Affinity Designer and Illustrator all presented your file differently in their layer&object panels. They also rendered it differently. Inkscape made only a dark distorted rectangle as in your screenshot, others show also some blue shapes, but differently.

Check it in Inkcape's objects panel. It has obscure grouping. Remove it with Extension > Arrange Deep Ungroup. The wanted coloring becomes visible, but clipping mask vanishes.

After ungrouping your image contains gradient filled partially transparent paths and a path with solid fill.

The structure seems simple, but the gradient fill is somehow fixed to the original group placement, it doesn't move when one moves the gradient filled shapes. Redefining the gradient in Inkscape corrects it. Ungrouping didn't fix the image properly.

I bet you have found something which is defined in SVG specs ambiquously. This is only a non-programmer's guess.

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.