Importing SVG gradients with userSpaceOnUse

[0HyperCube]

We don't currently handle importing SVGs with gradientUnits="userSpaceOnUse".

Relevant code:

Graphite/editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs

Lines 399 to 400 in 41288d7

	// TODO: fix this
	// let to_doc_transform = if linear.base.units() == usvg::Units::UserSpaceOnUse {

Sample svg:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="174" height="174" viewBox="0,0,174,174"><defs><radialGradient cx="240" cy="180" r="87" gradientUnits="userSpaceOnUse" id="color-1"><stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#000000"/></radialGradient></defs><g transform="translate(-153,-93)"><g data-paper-data="{&quot;isPaintingLayer&quot;:true}" fill="url(#color-1)" fill-rule="nonzero" stroke="#000000" stroke-width="0" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><path d="M153,180c0,-48.04877 38.95123,-87 87,-87c48.04877,0 87,38.95123 87,87c0,48.04877 -38.95123,87 -87,87c-48.04877,0 -87,-38.95123 -87,-87z"/></g></g></svg>

A test that this works properly would also be greatly appreciated.

[KartikSharma0]

Seems like the sample SVG was able to be imported without any issues. Can you please elaborate on the expected behavior?
I'd also appreciate if you could point to some documentation on UserSpaceOnUse

[0HyperCube]

@KartikSharma0 The issue is with importing SVG files. Not PNGs. This is clearly stated in the issue title: «Importing SVG…». You have to press import and then select a SVG file. Do not select a PNG file.

If you actually import the SVG file, you will see that the gradient is broken and the circle is all black.

It is very easy to search on the internet for documentation on gradientUnits="userSpaceOnUse" in SVG files. I do not feel it is beneficial for me to do it for you.

I hope that resolves your query.

[KartikSharma0]

@0HyperCube
Thank you for correcting me on how to reproduce the issue.

[KartikSharma0]

Seems like importing an SVG with a gradient doesn't work at all on Linux (Ubuntu). I tried the reproductions steps and wasn't able to import anything, the artboard remained blank.

[0HyperCube]

@KartikSharma0 I think perhaps you have not understood how to import an SVG file. You have to press file -> import and then select an SVG file. I have included a complete video of this process for the avoidance of doubts.

import_svg.mp4

Complete steps to import SVG file

• Open https://dev.graphite.art/
• Press on the «New Document» button
• Press on the «File» menu
• Press on the «Import» button
• Select a valid and complete SVG file (NOT a PNG file)
• Press on «OK» or «Confirm»

I hope these steps are adequate! I'm sorry for the confusion.

[KartikSharma0]

@0HyperCube I've followed these exact steps on Windows and was able to reproduce the bug as shown. When I was experimenting in my development environment (Ubuntu), I noticed I wasn't able to import the SVG with the gradient at all, but I was still able to import PNGs and SVGs without gradients with no issues. My apologies if my previous comment sounded like there was no bug on Linux.

Obviously I'll look into why the import is failing in my Ubuntu env.

[KartikSharma0]

Update: I wasn't able to import the svg file on Ubuntu as the file name did not contain ".svg" at the end. However, the file opened fine using the built-in image viewer.

[Keavon]

A file without a .SVG extension isn't an SVG file, it's just a text file.

[KartikSharma0]

I've created a draft PR where I fixed the issue with the radial gradient. I'd appreciate it if you could create a build and check it out.
#3602

I'm still investigating how to handle userSpaceOnUse and objectBoundingBox, I am looking for examples where I can see the differences between the two formats.