Arlen Keshabyan Posted August 11, 2019 Share Posted August 11, 2019 Hello Serif team. First of all, let me thank you for the amazing Affinity products that you've been making. Now, I want to report a bug about placing an SVG file. I try to place an SVG file into Designer and/or Publisher but it doesn't show up at all. I looks like a totally transparent object on the page. But the Inskape, Xara Designer Pro and Google chrome browser applications can display the SVG (I've attached to this topic) without any problem. Is it a bug? Thanks, Arlen. 1-plane.svg Quote Link to comment Share on other sites More sharing options...
Staff stokerg Posted August 12, 2019 Staff Share Posted August 12, 2019 Hi Arlen, Thanks for attaching the SVG file. If you place the SVG file and then double click on it, you'll see on the layer tab everything is there, just in the wrong location. You can select all and drag it back onto the page or with it selected use the Transform panel and set the X and Y correndiants to get everything back on the page (X:547.1 px Y:650.7 px). I've seen this happen before and know we have an issue logged, so i'll update the log and attach a copy of this file Quote Link to comment Share on other sites More sharing options...
ashf Posted August 12, 2019 Share Posted August 12, 2019 I experienced the same thing with Affinity and Adobe when opened a svg exported from Photopea. Developer of Photopea says: "I think there is a bug in Photoshop and other programs, it does not support URI-embedded SVGs in the SVG. You could try to report it to them." So I assume Arlen's svg might be a URI-embedded SVG. Quote Link to comment Share on other sites More sharing options...
firstdefence Posted August 12, 2019 Share Posted August 12, 2019 Open the SVG in Designer, look at the transform panel, the SVG graphics are there, they just have a negative Y: number, change the Y: value to 300px Once you have it in Affinity Designer just export it out as an SVG again. Oops didn't see your post @stokerg Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
ashf Posted August 12, 2019 Share Posted August 12, 2019 I just opened Arlen's svg now. And yeah, like firstdefence said, it's just caused by negative position. Mine was totally different. there's no object at all. Quote Link to comment Share on other sites More sharing options...
Arlen Keshabyan Posted August 12, 2019 Author Share Posted August 12, 2019 Thanks to everyone for the clarification. It helped a little bit. I'll explain why "a little bit". If Designer knows that the SVG object is going to be outside the page and totally invisible to the user, could Designer warn the user about this situation and suggest to move it onto the visible area of the page in this case? Now Designer feels a little bit user unfriendly Designer goes even further in being misleading for the user by displaying the empty surrounding rectangle on the empty page thus making the user think that this empty rectangle IS the real SVG object. Why Designer even draws this empty rectangle? I've managed to place the SVG on the page and I discovered that the result is not a little bit the same as the original one. The "WRONG" one is from the Affinity Designer: Thanks again for the great Affinity products. The Serif team builds wonderful professional grade products. I believe, together we can make the Affinity products even better! Thanks, Arlen. Quote Link to comment Share on other sites More sharing options...
PixelPest Posted August 12, 2019 Share Posted August 12, 2019 Your SVG file contains masks for the gradient effect on the strokes (stretched rectangles) which AD can´t read/interpret obviously: Rebuilding via gradient filled ellipses is easy enough though. Cheers Quote Link to comment Share on other sites More sharing options...
v_kyr Posted August 12, 2019 Share Posted August 12, 2019 36 minutes ago, PixelPest said: Your SVG file contains masks for the gradient effect on the strokes (stretched rectangles) which AD can´t read/interpret obviously: It's not just the <mask>'s, it also doesn't support <radialGradient>'s. Affinity in the OP's case just knows to draw the <paths> everything else is ommited. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Joachim_L Posted August 12, 2019 Share Posted August 12, 2019 25 minutes ago, v_kyr said: It's not just the <mask>'s, it also doesn't support <radialGradient>'s. Add <pattern> to the list of tags which are not supported. Quite a few, so SVG seems a bit unreliable. Quote ------ Windows 10 | i5-8500 CPU | Intel UHD 630 Graphics | 32 GB RAM | Latest Retail and Beta versions of complete Affinity range installed Link to comment Share on other sites More sharing options...
PixelPest Posted August 12, 2019 Share Posted August 12, 2019 58 minutes ago, v_kyr said: it also doesn't support <radialGradient>'s Really? I can add these and export to SVG-for-export and they´re all in. Plain_AD_SVG.svg Quote Link to comment Share on other sites More sharing options...
v_kyr Posted August 12, 2019 Share Posted August 12, 2019 I tried with this one ... Quote <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialGradient id="myGradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialGradient> </defs> <!-- using my gradient --> <circle cx="5" cy="5" r="4" fill="url('#myGradient')" /> </svg> ... in which case it isn't handled right. So it might be dependent on parsing third party generated SVG code. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
PixelPest Posted August 12, 2019 Share Posted August 12, 2019 I tried with this one ... This don´t seem a proper SVG file. Quote <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg5804" viewBox="0 0 133.80357 23.434523" height="23.434523mm" width="133.80357mm"> <defs id="defs5806"> <linearGradient id="linearGradient6357"> <stop id="stop6359" offset="0" style="stop-color:#ff0000;stop-opacity:1" /> <stop id="stop6361" offset="1" style="stop-color:#ff0000;stop-opacity:0" /> </linearGradient> <radialGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.17514123,0,45.134014)" r="66.901787" fy="54.717262" fx="92.604164" cy="54.717262" cx="92.604164" id="radialGradient6363" xlink:href="#linearGradient6357" /> </defs> <metadata id="metadata5809"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-25.702377,-43.000001)" id="layer1"> <ellipse ry="11.717261" rx="66.901787" cy="54.717262" cx="92.604164" id="path6355" style="opacity:1;fill:url(#radialGradient6363);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.23399997;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> </g> </svg> Quote Link to comment Share on other sites More sharing options...
v_kyr Posted August 12, 2019 Share Posted August 12, 2019 Web browsers and SVG playgrounds can handle that ... https://jsfiddle.net/s37hv1fr/ Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
PixelPest Posted August 12, 2019 Share Posted August 12, 2019 4 minutes ago, v_kyr said: Web browsers and SVG playgrounds can handle that ... Your text snippet? I made a radial gradient elsewhere that AD can read - that´s all I wanted to say. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted August 12, 2019 Share Posted August 12, 2019 It highly depend on the SVG code it can parse/interpret and handle or not in this case. Thus I previously said it might also depend on the third party generated SVG code. MDN <radialGradient> Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Arlen Keshabyan Posted August 12, 2019 Author Share Posted August 12, 2019 7 hours ago, PixelPest said: This don´t seem a proper SVG file. This SVG was generated by Inkscape with the plane SVG option. I'm very doubtful that this SVG is wrong because, as I stated before, any web browser, Xara and Inkscape can display this SVG correctly. Though, to state this SVG is incorrect we need to know whether it complies with the W3C specification or not. 9 hours ago, PixelPest said: Your SVG file contains masks for the gradient effect on the strokes (stretched rectangles) which AD can´t read/interpret obviously: Yes, it does. But the question is not about why it contains masks. It contains masks because SVG can legally contain masks. Why not? :) The question is why AD cannot properly parse it, execute and display while other applications can do it without a hassle. ;) Quote Link to comment Share on other sites More sharing options...
PixelPest Posted August 12, 2019 Share Posted August 12, 2019 9 minutes ago, Arlen Keshabyan said: This SVG was generated by Inkscape with the plane SVG option. I'm very doubtful that this SVG is wrong because, as I stated before, any web browser, Xara and Inkscape can display this SVG correctly. Though, to state this SVG is incorrect we need to know whether it complies with the W3C specification or not. Yes, it does. But the question is not about why it contains masks. It contains masks because SVG can legally contain masks. Why not? :) The question is why AD cannot properly parse it, execute and display while other applications can do it without a hassle. I was talking about the snippet v_kyr posted not your SVG which works just fine everywhere except AD - so I have the same question like you. And another: Was it really made inside Inkscape or just smuggled through this pipeline because of something? I ask because creating this kind of masks is tedious instead of drawing a stretched ellipse with a proper radial gradient. Cheers Quote Link to comment Share on other sites More sharing options...
firstdefence Posted August 12, 2019 Share Posted August 12, 2019 16 minutes ago, Arlen Keshabyan said: Though, to state this SVG is incorrect we need to know whether it complies with the W3C specification or not. https://validator.w3.org/#validate_by_upload Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
Arlen Keshabyan Posted August 12, 2019 Author Share Posted August 12, 2019 30 minutes ago, PixelPest said: I was talking about the snippet v_kyr posted not your SVG which works just fine everywhere except AD - so I have the same question like you. Sorry for misunderstanding then 30 minutes ago, firstdefence said: https://validator.w3.org/#validate_by_upload Yeah. It looks like the file is the correct SVG from the W3C standard perspective (except for one warning ) Quote Link to comment Share on other sites More sharing options...
Arlen Keshabyan Posted August 12, 2019 Author Share Posted August 12, 2019 35 minutes ago, PixelPest said: And another: Was it really made inside Inkscape or just smuggled through this pipeline because of something? I ask because creating this kind of masks is tedious instead of drawing a stretched ellipse with a proper radial gradient. It was created in Xara and exported to the SVG by Xara. Then it was successfully opened by Inkscape and then re-exported to plain SVG from Inkscape. Quote Link to comment Share on other sites More sharing options...
ashf Posted August 14, 2019 Share Posted August 14, 2019 @stokerg Affinity Designer can't show this svg correctly. But Gravit Designer can. Quote Link to comment Share on other sites More sharing options...
PixelPest Posted August 14, 2019 Share Posted August 14, 2019 It´s a super nested image - no vector data at all. Safari can display it, eazyDraw, Intaglio don´t. As Inkscape can´t handle these kind of encapsulated images either I´m more concerned about the file in general as to expect AD to handle it - I´m sorry. Quote Link to comment Share on other sites More sharing options...
ashf Posted August 14, 2019 Share Posted August 14, 2019 It's a smart object extracted form psd on Photopea. So that should be nested layer structure of the psd I guess. I may be able to use pdf export instead of svg. Though if Affinity can read smart objects, this is an unnecessary step in the first place. Quote Link to comment Share on other sites More sharing options...
walt.farrell Posted August 14, 2019 Share Posted August 14, 2019 1 hour ago, ashf said: Though if Affinity can read smart objects, this is an unnecessary step in the first place. It can't, except in a flattened/rasterized form. Quote -- Walt Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases PC: Desktop: Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 Laptop: Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU. iPad: iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard Mac: 2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1 Link to comment Share on other sites More sharing options...
ashf Posted August 14, 2019 Share Posted August 14, 2019 4 hours ago, walt.farrell said: It can't, except in a flattened/rasterized form. I know, that's why Photopea is needed. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.