Exporting to SVG without rasterisation (AD)

[tebiko]

Hi,

 

I am currently stuggling to export very simple shape with a shadow to SVG using Affinity Designer (Windows). The design is quite simple: It comprises two rectangles - one in red without a border and one in grey. The grey one works as a shadow. Therefore a Gaussian blur was applied ( I know there is an extra function to add shadows, but that one was not used). When trying to export this to SVG, AD wants to convert the grey rectangle to a bitmap. That leaves the SVG useless for me.

 

I am surprised by this behavior as there is a gaussian blur filter in the SVG definition. Just to give an example of the usage of the "feGaussianBlur" in a SVG file:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg width="380px" height="370px"     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <title>The simple feGaussianBlur filter</title>  <desc>    Example of usage  </desc>  <defs>    <style type="text/css">    <![CDATA[      text {font-family:Verdana,sans-serif; font-size:16px;            font-weight:bold;}    ]]>    </style>    <symbol id="smilie">      <desc>ein lachendes Smilie</desc>      <circle id="gesicht" cx="20" cy="20" r="15"        fill="yellow" stroke="black" />      <circle id="auge-links" cx="15" cy="15" r="2"        fill="black" stroke="black" />      <circle id="auge-rechts" cx="25" cy="15" r="2"        fill="black" stroke="black" />      <line id="nase" x1="20" y1="18" x2="20" y2="23"        stroke="black" stroke-width="2" />      <path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"        stroke="black" fill="none" stroke-width="2" />    </symbol><!-- 6 Filter mit feGaussianBlur -->    <filter id="f1">      <feGaussianBlur in="SourceGraphic" stdDeviation=".5" />    </filter>    <filter id="f2">      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />    </filter>    <filter id="f3" x="-20%" y="-20%" width="150%" height="150%">      <feGaussianBlur in="SourceGraphic" stdDeviation="1.5,.5" />    </filter>    <filter id="f4" x="-20%" y="-20%" width="150%" height="150%">      <feGaussianBlur in="SourceGraphic" stdDeviation=".5,1.5" />    </filter><!-- zusätzlich mit feBlend, feOffset und feMerge -->    <filter id="f5" x="-20%" y="-20%" width="150%" height="150%">      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="out1" />      <feBlend in="SourceGraphic" in2="out1" mode="darken" />    </filter>    <filter id="f6" x="-20%" y="-20%" width="150%" height="150%">      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" />      <feOffset in="out1" dx="2" dy="-2" result="out2" />      <feMerge>        <feMergeNode in="out2" />        <feMergeNode in="SourceGraphic" />      </feMerge>    </filter>  </defs><!-- die Instanzen des Symbols "smilie" -->  <use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />  <use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"    filter="url(#f1)" />  <use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"    filter="url(#f2)" />  <use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"    filter="url(#f3)" />  <use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"    filter="url(#f4)" />  <use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"    filter="url(#f5)" />  <use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"    filter="url(#f6)" /><!-- Text und Hilfslinien -->  <text x="145" y="130">feGaussianBlur</text>  <text x="58" y="130">Original</text>  <line x1="137" y1="40" x2="137" y2="330" stroke="black" /></svg>

Is there a workaround availabe to force AD not to convert objects into a bitmap during export?

 

Thanks,

Volker

 

[VIPStephan]

Perhaps the reason for this is because that kind of filter isn’t supported in every application (especially web browsers) so serif decided to go the safe way?

[R C-R]

Perhaps the reason for this is because that kind of filter isn’t supported in every application (especially web browsers) so serif decided to go the safe way?

That seems likely. According to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur#Browser_compatibility, for desktop browsers only Firefox, Opera, & Safari offer "basic" support for that filter, & no mobile browser is listed as supporting it.