View Issue Details

IDProjectCategoryView StatusLast Update
0003678NoesisGUIStudiopublic2025-10-30 14:38
Reporterdstewart Assigned Tojsantos  
PrioritynormalSeverityminor 
Status assignedResolutionopen 
Product VersionStudio_Alpha 
Target VersionStudio_Beta 
Summary0003678: Photoshop SVGs Import Differently Into Studio Depending on Method
Description

Drawing a Path with the PenTool in Photoshop which contains a Gradient Fill with Transparency, is pasted into Studio in 1:1 fidelity in terms of shape, and fill.

However, when the exact same artwork is exported as an SVG, it exports to the SVG with the correct visual qualities, but once Imported into Studio via the 'Edit'->'Import SVG Path' context menu, it renders as a black shape rather than containing the expected fill.

(Attached a sample SVG if you want to skip the part of the repro steps where you have to create a custom shape with a gradient fill)

Steps To Reproduce

Repro Steps:

1) Set up Photoshop to support exporting SVG files by navigating to Photoshop's Preferences menu. This can be accessed by pressing Ctrl (Hold) + K and navigating to the 'Export' tab. Alternately, the Preferences window can be accessed by expanding the "Edit" menu, hovering over 'Preferences', and selecting the 'Export...' option.

2) Using the Pen Tool (P), draw any enclosed Shape in Photoshop, and apply a Gradient Fill to it. Ideally, at least one of the gradient stops should contain some opacity.

3) Create a Page in Studio.

4) In Photoshop, right-click the vector shape in the Layers Panel, and select 'Copy as SVG' from the context menu.

5) Open Studio, and Ctrl+V paste the shape from Photoshop into the Page's RootGrid.

Observe how the shape has pasted as expected, and its appearance is a 1:1 match with the version in Photoshop.

6) Return to Photoshop, and navigate to the The 'Export As' window, which can then be opened either by pressing Alt (Hold) + Shift (Hold) + Ctrl (Hold) + W, or by navigating to the 'File' menu, hovering over 'Export', and selecting 'Export As...'. In the 'Export As' window, the SVG format can then be selected from the 'Format' dropdown menu, before clicking 'Export' to save the file.

7) Open Studio, right-click on the RootGrid on the Page to expose its context menu, and navigate to 'Edit', then select 'Import SVG Paths'.

8) Select the SVG exported in Step 6), and import it into Studio.

Observe how this time, the SVG is just a black shape, whilst losing fill properties.

9) Open the SVG in Adobe Illustrator, or any SVG Viewer.

Observe how the fill values are included in the SVG.

Expected Results: Copy-Pasting an SVG, and Importing an SVG into Studio produce the same visual results when imported.

Attached Files
PlatformAny

Relationships

related to 0003681 resolvedsfernandez Studio Does Not Accurately Reproduce Radial Gradients in SVGs Copied from Photoshop 
related to 0003683 assignedjsantos Linear Gradients Imported from Affinity Software Do Not Render Accurately in Studio 

Activities

dstewart

dstewart

2025-10-30 14:38

developer   ~0011305

I think Step 1) can be ignored, can't at all find what I was talking about. The rest of the ticket still applies however.

Issue History

Date Modified Username Field Change
2024-09-04 17:51 dstewart New Issue
2024-09-04 17:51 dstewart File Added: PhotoshopSVGLinearGradient.svg
2024-09-05 11:03 jsantos Assigned To => jsantos
2024-09-05 11:03 jsantos Status new => assigned
2024-09-05 11:03 jsantos Target Version => Studio_Path
2024-09-05 15:44 jsantos Relationship added related to 0003681
2024-09-05 17:20 dstewart Relationship added related to 0003683
2025-04-02 11:08 sfernandez Target Version Studio_Path => Studio_Beta
2025-10-30 14:38 dstewart Note Added: 0011305