SVG clipPath ignored

[AdamStanislav]

When importing an SVG file which contains a clipPath element, AD ignores the clipping path and displays objects that extend outside the clipping path.

 

This image shows what such a graphic looks like in AD (the bottom star should be cut off at the border with the green stripe but is not):

 

 

Here is what it is supposed to look like:

 

 

I wish I could show you the SVG original, but the forum refuses to upload it.

 

Adam

 

 

[AdamStanislav]

Well, since I have been unable to upload the SVG file (and I have tried repeatedly), I am going to paste it here:

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 16">

<g id="bosniarainbowflag">

<title>The Bosnia and Herzegovina Rainbow Flag</title>

 

<defs>

<linearGradient id="Rainbow" x1="0" x2="0" y1="0" y2="1" gradientUnits="objectBoundingBox">

<stop offset="0" stop-color="#F00"/>

<stop offset="0.1667" stop-color="#F00"/>

<stop offset="0.1667" stop-color="#FF9800"/>

<stop offset="0.3333" stop-color="#FF9800"/>

<stop offset="0.3333" stop-color="#FF0"/>

<stop offset="0.5" stop-color="#FF0"/>

<stop offset="0.5" stop-color="#009800"/>

<stop offset="0.6667" stop-color="#009800"/>

<stop offset="0.6667" stop-color="#00F"/>

<stop offset="0.8333" stop-color="#00F"/>

<stop offset="0.8333" stop-color="#980098"/>

<stop offset="1.00" stop-color="#980098"/>

</linearGradient>

</defs>

 

<g id="rainbowflag" fill="url(#Rainbow)">

<title>The Rainbow Flag</title>

<rect width="24" height="16"/>

</g>

 

<clipPath id="snip">

<rect width="16" height="8"/>

</clipPath>

 

<g id="bosniaflag" clip-path="url(#snip)">

<title>The Bosnia and Herzegovina Flag</title>

<desc>https://upload.wikimedia.org/wikipedia/commons/b/bf/Flag_of_Bosnia_and_Herzegovina.svg</desc>

 

<rect width="16" height="8" fill="#002395"/>

<path d="m4.24,0h8v8z" fill="#fecb00"/>

<g id="g">

<path d="M2.353283,0.5248529 2.8,-0.85 3.246717,0.524853 2.077197,-0.324853H3.522803z" fill="#fff" id="s"/>

<use xlink:href="#s" x="1" y="1"/>

<use xlink:href="#s" x="2" y="2"/>

</g>

<use xlink:href="#g" x="3" y="3"/>

<use xlink:href="#g" x="6" y="6"/>

</g>

</g>

</svg>

 

[Alfred]

I wish I could show you the SVG original, but the forum refuses to upload it.

 

The code that you pasted in your subsequent message reveals (in the 'desc' tag element) that the original file is here: https://upload.wikimedia.org/wikipedia/commons/b/bf/Flag_of_Bosnia_and_Herzegovina.svg

 

I can confirm that the top and bottom groups of stars are not clipped in AD, but I see the same in both Inkscape and Serif DrawPlus.

[AdamStanislav]

The Herzegovina.svg file does not declare a clipPath, but the one I posted does. You can see it at https://openclipart.org/detail/257331/the-bosnia-and-herzegovina-rainbow-flag. The image on that page has it clipped properly. If you click on the image, you will see the SVG file whose code I posted above.

 

Or you can just go directly to https://openclipart.org/download/257331/bosniarainbowflag.svg and see it in your browser. Also Inkscape clips that one (the one I posted) correctly. Serif DrawPlus also clips it, though messes up the background (but I’m not too concerned with DrawPlus because once we have a fully functional AD, we can stop using DP).

[MikeW]

It remains clipped properly in XDP.

 

 

It also is clipped properly when opened in AI & InkScape.

[Alfred]

The Herzegovina.svg file does not declare a clipPath, but the one I posted does. You can see it at https://openclipart.org/detail/257331/the-bosnia-and-herzegovina-rainbow-flag. The image on that page has it clipped properly. If you click on the image, you will see the SVG file whose code I posted above.

 

Oops! Apologies for the schoolboy error.

 

Or you can just go directly to https://openclipart.org/download/257331/bosniarainbowflag.svg and see it in your browser. Also Inkscape clips that one (the one I posted) correctly. Serif DrawPlus also clips it, though messes up the background (but I’m not too concerned with DrawPlus because once we have a fully functional AD, we can stop using DP).

 

Thanks. I can confirm that Inkscape clips that one correctly (and, unlike DP, it doesn't mess up the stripes).

[Jon P]

Thanks for making sure this got reported, the issue is already logged with us and should hopefully be fixed in a future version.

[AdamStanislav]

Thanks, QA.

 

I have just noticed another problem with imported SVG and will just mention it here instead of starting another thread.

 

The SVG in question can be had by going here and clicking on the image. The image on that page shows what it should look like. The image here shows how AD is interpreting it:

 

 

The problem is that AD is incorrectly interpreting, or just plain ignoring, the spreadMethod="reflect" in the linearGradient declaration.

 

Adam

 

P.S. This time I was able to attach the SVG file itself here: thailandflag.svg

[Jon P]

That one wasn't reported, so thanks! 

 

I've just logged it for the developers to look into :)

[AdamStanislav]

That one wasn't reported, so thanks! 

 

I've just logged it for the developers to look into :)

 

You’re most welcome, Jon.

 

Adam