View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0003678 | NoesisGUI | Studio | public | 2024-09-04 17:51 | 2025-10-30 14:38 |
| Reporter | dstewart | Assigned To | jsantos | ||
| Priority | normal | Severity | minor | ||
| Status | assigned | Resolution | open | ||
| Product Version | Studio_Alpha | ||||
| Target Version | Studio_Beta | ||||
| Summary | 0003678: 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 | |||||
| Platform | Any | ||||
| related to | 0003681 | resolved | sfernandez | Studio Does Not Accurately Reproduce Radial Gradients in SVGs Copied from Photoshop |
| related to | 0003683 | assigned | jsantos | Linear Gradients Imported from Affinity Software Do Not Render Accurately in Studio |
| 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 |