Inspiring

Answered

Problems export asset with text as svg

6 replies
2232 views
Translate

Hi there ;))

I have to export an asset as svg and are having problems with the position of the text - it doesn't stay in the correct position. If anyone knows, what could be the problem, I'll be glad for your support. :))

1. screenshot in XD

2. after svg export

Thanks 🌿

Spas K.Correct answer

Community Expert

You can try converting the text to a path (Object > Path > Convert to Path). Text in SVGs is rendered differently by different browsers and situations and is best avoided. You will also have to make the fonts used available on the web page and use web-safe fonts.

If it's important for it to stay as text, you can recreate it with html/css for the best / safest result.

Spas K.

Correct answer

Community Expert

You can try converting the text to a path (Object > Path > Convert to Path). Text in SVGs is rendered differently by different browsers and situations and is best avoided. You will also have to make the fonts used available on the web page and use web-safe fonts.

If it's important for it to stay as text, you can recreate it with html/css for the best / safest result.

Translate

frauenaugeAuthor

Inspiring

Cool, thank you @Spas K. ,

it works perfectly now, if I convert text into path! 😃On the web-page I will of course try to work mostly with real text and just use the (blue) background with the spirals.

What I don't understand is, why was the big headline not offset, only the smaller fonts ... 🤓...

Translate

Spas K.

Community Expert

Could be a number of things. Might have something to do with how the layers are grouped, both of those smaller texts seem to be offset by the same amount. Not sure how Xd interprets the layer hierarchy when exporting SVGs.

Translate

C

chris.bannu

Known Participant

Hi,

Sorry for the off topic, but can you open the SVG you exported from XD in Photoshop or Illustrator? Also, does it work when you use it in the HTML/CSS files?

Translate

frauenaugeAuthor

Inspiring

Hi Chris, yes, I can open it, but there is a warning: "Zuschneidung geht beim Export ins SVG Tiny-Format verloren" (Clipping is lost when exporting to SVG Tiny format).

And the text is displayed offset like in my screenshot. Could it possibly be because I used a drop shadow?

best regards 😉

Translate

frauenaugeAuthor

Inspiring

P.S. I can open it in Illustrator and with a browser, e.g. Firefox ...

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.