Jump to content

Placing an SVG doesn't work neither in Designer nor in Publisher


Recommended Posts

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

Link to post
Share on other sites
  • Moderators

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 :) 

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to post
Share on other sites

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:

image.thumb.png.c0a1af1dd4737ffe70deb0db8fd59cab.png

 

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.

Link to post
Share on other sites
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.

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
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.

------
Windows 10 | i5-8500 CPU | Intel UHD 630 Graphics | 8 GB RAM | Latest Retail and Beta versions of complete Affinity range installed

Link to post
Share on other sites

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.

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites

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>

 

Link to post
Share on other sites
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. ;)

Link to post
Share on other sites
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

Link to post
Share on other sites
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

iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to post
Share on other sites
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:

Yeah. It looks like the file is the correct SVG from the W3C standard perspective (except for one warning :))

 

Link to post
Share on other sites
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.

Link to post
Share on other sites

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.

nestedrasterImage.png.116ece0c26abd77116ff94a3f3598919.pngPainCode.png.4ed93322352d7402dd3bf8fb28497df0.png

Link to post
Share on other sites

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.

Link to post
Share on other sites
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.

-- Walt

Windows 10 Home, version 20H2 (19042.685),
   Desktop: 16GB memory, Intel Core i7-6700K @ 4.00GHz, GeForce GTX 970
   Laptop (2021-04-06):  32GB memory, Intel Core i7-10750H @ 2.60GHz
, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU
Affinity Photo 1.9.2.1035 and 1.9.4.1048 Beta   / Affinity Designer 1.9.2.1035 and 1.9.4.1048 Beta  / Affinity Publisher 1.9.2.1035 and 1.9.2.1024 Beta

Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.