Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Problems export asset with text as svg

Community Beginner ,
Aug 30, 2021 Aug 30, 2021

Copy link to clipboard

Copied

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 :herb:screenshot1.pngscreenshot2.svg

 

Views

324

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Aug 31, 2021 Aug 31, 2021
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.

Likes

Translate

Translate
Explorer ,
Aug 30, 2021 Aug 30, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 31, 2021 Aug 31, 2021

Copy link to clipboard

Copied

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 😉

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 31, 2021 Aug 31, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 31, 2021 Aug 31, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 01, 2021 Sep 01, 2021

Copy link to clipboard

Copied

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 ... 🤓...

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 01, 2021 Sep 01, 2021

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines