Export SVG in Shape of Curve in Designer

[turt1eback]

I'm trying to export a shape as a SVG. I only want the shape, but it exports with the (transparent) background, essentially creating a rectangular SVG. More specifically, in the image below, I only want the white shape, but the entire blue rectangle exports. How can I export the shape only? Thanks.

[walt.farrell]

Welcome to the Affinity forums.

It would help to have the screenshot show the Layers panel. And to see your Export settings.

[turt1eback]

10 minutes ago, walt.farrell said:

Welcome to the Affinity forums.

It would help to have the screenshot show the Layers panel. And to see your Export settings.

Hi Walt. I've attached my layers and export settings.

Edited September 29 by turt1eback

[George-Frazee]

I'm not following what the issue is. You say it's exporting the "entire blue rectangle," are you saying it's filling in the background in some way?

[turt1eback]

30 minutes ago, George-Frazee said:

I'm not following what the issue is. You say it's exporting the "entire blue rectangle," are you saying it's filling in the background in some way?

Sorry. I mean the full SVG is in the shape of a rectangle. I want to add it to a web project so that when the white part is hovered, an action happens, but the action occurs when I hover anywhere within the blue square.

[George-Frazee]

47 minutes ago, turt1eback said:

Sorry. I mean the full SVG is in the shape of a rectangle. I want to add it to a web project so that when the white part is hovered, an action happens, but the action occurs when I hover anywhere within the blue square.

I see. I don't think this is an issue with Affinity or exporting, but how SVGs work by default in browsers on hover. This better may be better asked (or searched for) on Stack Overflow or one of Reddit's web design subs.

Just on a quick search myself, I believe CSS pointer-events might be what you're looking for (they do seem widely supported), but I don't know your project and I've mostly not needed to alter the default behavior for SVGs I use. Here's the link that pointed me in that direction.

[Komatös]

5 hours ago, turt1eback said:

I want to add it to a web project so that when the white part is hovered,

I'm not very familiar with website programming, but if I remember correctly, a coordinate area needs to be designated for point & click actions.
But as I said, I'm not really familiar with website programming.

[David in Яuislip]

Try this approach

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1697 2232" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <path id="blob" d="M541.264,850.287c41.323,-202.184 145.242,-308.39 307.174,-325.642c18.93,-100.251 207.323,-219.331 443.611,-343.733c71.341,276.327 -44.199,404.108 -286.444,431.174c-162.818,204.228 -128.652,290.266 150.76,229.156c47.238,-58.628 94.476,-83.087 141.715,-69.35l-12.061,69.35c118.59,524.106 112.468,991.114 -437.582,1209.1c-370.829,-314.857 -505.212,-707.297 -361.447,-1191.01l54.274,-9.046Z" />
<!--style="fill:#00f;" Delete this from path above and use css style for the base colour and the hover effect--> 
<style>
#blob{fill:#00f;}
#blob:hover{fill:#f00;}
</style>
</svg>

 

[turt1eback]

6 hours ago, David in Яuislip said:

Try this approach

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1697 2232" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <path id="blob" d="M541.264,850.287c41.323,-202.184 145.242,-308.39 307.174,-325.642c18.93,-100.251 207.323,-219.331 443.611,-343.733c71.341,276.327 -44.199,404.108 -286.444,431.174c-162.818,204.228 -128.652,290.266 150.76,229.156c47.238,-58.628 94.476,-83.087 141.715,-69.35l-12.061,69.35c118.59,524.106 112.468,991.114 -437.582,1209.1c-370.829,-314.857 -505.212,-707.297 -361.447,-1191.01l54.274,-9.046Z" />
<!--style="fill:#00f;" Delete this from path above and use css style for the base colour and the hover effect--> 
<style>
#blob{fill:#00f;}
#blob:hover{fill:#f00;}
</style>
</svg>

 

I think this is the best answer I have. I'll see what I can do with it. Thanks!

[turt1eback]

12 hours ago, George-Frazee said:

I see. I don't think this is an issue with Affinity or exporting, but how SVGs work by default in browsers on hover. This better may be better asked (or searched for) on Stack Overflow or one of Reddit's web design subs.

Just on a quick search myself, I believe CSS pointer-events might be what you're looking for (they do seem widely supported), but I don't know your project and I've mostly not needed to alter the default behavior for SVGs I use. Here's the link that pointed me in that direction.

Thanks for the suggestion, but SVGs actually can work the way I want in browser. I don't know the root of the problem here. Maybe Affinity simply cannot fix this for me.

[turt1eback]

7 hours ago, Komatös said:

I'm not very familiar with website programming, but if I remember correctly, a coordinate area needs to be designated for point & click actions.
But as I said, I'm not really familiar with website programming.

Not exactly, but thanks for the response.