Affinty Designer V1 | SVG export settings for Elementor (WordPress)

[yosefgehasy]

hello there!

trying to export icon from the designer to use in Elementor plug-in of WordPress in the icon widget.

i could export it as SVG and it responsive for size changes when using the Elementor widget, but when i try to change the color it won't response.

i have looked around the web and found solution but only with Adobe Illustrator. have added picture of the recommended from this YT vid:

it might explain my problem better even.

thanks for your time, hope to find solution soon!

[Hangman]

Hi @yosefgehasy,

In Illustrator the styling is set to Internal CSS in the exported SVG file which means the SVG includes CSS code which then allows Elementor to target and change the colour property of your SVG file via the style sheet. Affinity apps don't support CSS hence why you're unable to change the SVG colour once in WordPress using Elementor.

If you want to target the icon as a whole, rather than individual elements within the same icon, e.g., changing the hand icon from black to red, then you may be able to target the SVG file as an image element in Elementor...

[v_kyr]

Hello again ATTk20,

the overall main problem has already been named by Hangman above, which is due to the fact how ADe only supports to export/generate SVG code via Inline style (i.e., CSS property declarations within a ‘style’ attribute on a particular SVG element) here so far.

The SVG v1.1 spec (from which Affinity sadly only supports a minimal subset) defines those as ...

• Styling with CSS   <- usage examples for "external css/internal css/inline style" are shown there

 

Quote

 

SVG implementations that support CSS are required to support the following:

• External CSS style sheets referenced from the current document (see Referencing external style sheets)
• Internal CSS style sheets (i.e., style sheets embedded within the current document, such as within an SVG ‘style’ element)
• Inline style (i.e., CSS property declarations within a ‘style’ attribute on a particular SVG element)

...

 

... were Adobe Illustrator in contrast to Affinity seems to support the SVG generation of all three of these instead!

So you probably can't export/generate these as vectors automatically in an Elementor suitable manner from ADe, at least not without manual tweaking of the SVG code afterwards.

NOTE that there is a little Elementor related Blog entry for ...

• How to Change Custom SVG Icons Color in Elementor?

... which gives a little (not exhaustive detailed) hint for that changing a SVG icon color via CSS theme!

[yosefgehasy]

hello people. thanks for quick and wide explanation of the circumstance. I'm trying to solve the problem using Inkscape. any of familer and know what settings should i use?

[Hangman]

Looking at how Elementor handles SVG files it should be possible to use Affinity generated SVG files as Elementor recommends not including any inline styles anyway and it uses Fill to apply colour to the SVGs internally...

Elementor say... "Ideally, you should export SVG files from applications such as Illustrator without any inline styles, to allow Elementor to style the icon. However, if the SVG you’ve uploaded has width or height inline styling on it, you can override that by adding this CSS in the Advanced tab of any widget using the SVG icon:

selector svg { width: 100% !important; height: 100% !important; }

This will allow Elementor to control the size of the icon."

You should then be able to resize and change the SVG colour directly within Elementor.

So this should work exporting SVGs from Designer as well.

See if this helps...