How can I analyse this SVG image downloaded from the web?

Question

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:

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.

Answer 1

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.

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