0

I am trying to export an SVG logo in Illustrator which is just font letters as one path, rather than lots for each letter. The reasoning behind this, I have just found it, is because CSS mix-blend-mode does not work when a SVG property has a transform element inside. Using these settings, and a majority of the other combinations I have tried, I cannot get the SVG to export with just one big path.

<path d="M1056.93,442.77c2.29,0,4.06,1.08,4.06,4.08s-1.39,4.48-4.13,4.48h-2.92v-8.56Zm0,7.6c1.7,0,2.9-1,2.9-3.37s-1-3.27-2.83-3.27h-2v6.64Z" transform="translate(-1053.94 -442.57)" style="fill:#fff"/>
. . . so on . . . 

This letter is no good sadly, as it contains (like the other letters) transform properties. I have seen some websites that just have it in one large path that closes accordingly and without any transform properties.

<path fill="#FFF" d="M1.12 21.2c.77-2.04 1.86-3.79 3.28-5.22 1.42-1..........> </path>

Do I need to flatten the file somehow? So it reads as one 'object' rather than each font letter?

I am unsure. Thanks very much in advance.

1

In Illustrator, convert the text to outlines, ungroup it, then do Object > Compound Path > Make

When you save the SVG, the text will all be one compound path.

For example

<path d="M49,46.4c-1.7,0.8-5,1.7-9.3,1.7c-9.9,0-17.3-6.2-17.3-17.8c0-11,7.4-18.4,18.3-18.4c4.4,0,7.1,0.9,8.3,1.6L48,17.1
c-1.7-0.8-4.2-1.5-7.1-1.5c-8.2,0-13.7,5.3-13.7,14.5c0,8.6,4.9,14.1,13.5,14.1c2.8,0,5.6-0.6,7.4-1.5L49,46.4z M76.8,34.7
c0,9.3-6.5,13.4-12.5,13.4c-6.8,0-12.1-5-12.1-13c0-8.4,5.5-13.4,12.5-13.4C71.9,21.8,76.8,27,76.8,34.7z M56.8,35
c0,5.5,3.2,9.7,7.7,9.7c4.4,0,7.7-4.1,7.7-9.8c0-4.3-2.1-9.7-7.5-9.7C59.1,25.2,56.8,30.2,56.8,35z M82.6,29.2
c0-2.6-0.1-4.7-0.2-6.8h4l0.2,4.1h0.2c1.4-2.4,3.7-4.6,7.9-4.6c3.4,0,6,2.1,7.1,5h0.1c0.8-1.4,1.8-2.5,2.8-3.3
c1.5-1.1,3.2-1.8,5.6-1.8c3.3,0,8.3,2.2,8.3,10.9v14.8h-4.5V33.3c0-4.8-1.8-7.8-5.5-7.8c-2.6,0-4.6,1.9-5.4,4.2
c-0.2,0.6-0.4,1.5-0.4,2.3v15.6h-4.5V32.4c0-4-1.8-6.9-5.3-6.9c-2.9,0-4.9,2.3-5.7,4.6c-0.3,0.7-0.4,1.5-0.4,2.2v15.2h-4.5V29.2z
 M126,30.6c0-3.2-0.1-5.8-0.2-8.2h4.1l0.2,4.3h0.1c1.9-3.1,4.8-4.9,9-4.9c6.1,0,10.7,5.2,10.7,12.8c0,9.1-5.5,13.5-11.5,13.5
c-3.3,0-6.2-1.5-7.8-4h-0.1v13.7H126V30.6z M130.5,37.3c0,0.7,0.1,1.3,0.2,1.9c0.8,3.2,3.6,5.4,6.9,5.4c4.8,0,7.7-4,7.7-9.7
c0-5-2.7-9.4-7.5-9.4c-3.1,0-6,2.2-6.9,5.7c-0.2,0.6-0.3,1.3-0.3,1.9V37.3z M178.4,34.7c0,9.3-6.5,13.4-12.5,13.4
c-6.8,0-12.1-5-12.1-13c0-8.4,5.5-13.4,12.5-13.4C173.6,21.8,178.4,27,178.4,34.7z M158.5,35c0,5.5,3.2,9.7,7.7,9.7
c4.4,0,7.7-4.1,7.7-9.8c0-4.3-2.1-9.7-7.5-9.7C160.8,25.2,158.5,30.2,158.5,35z M205.3,40.7c0,2.6,0.1,4.9,0.2,6.9h-4.1l-0.3-4.1
h-0.1c-1.2,2-3.9,4.7-8.3,4.7c-4,0-8.7-2.2-8.7-11V22.3h4.6v13.9c0,4.8,1.5,8,5.6,8c3.1,0,5.2-2.1,6-4.2c0.3-0.7,0.4-1.5,0.4-2.3
V22.3h4.6V40.7z M212.9,29.2c0-2.6-0.1-4.7-0.2-6.8h4.1l0.3,4.2h0.1c1.2-2.4,4.2-4.7,8.3-4.7c3.5,0,8.9,2.1,8.9,10.7v15h-4.6V33
c0-4.1-1.5-7.4-5.8-7.4c-3,0-5.4,2.1-6.1,4.7c-0.2,0.6-0.3,1.4-0.3,2.1v15.1h-4.6V29.2z M263.6,10.6V41c0,2.2,0.1,4.8,0.2,6.5h-4.1
l-0.2-4.4h-0.1c-1.4,2.8-4.5,4.9-8.6,4.9c-6.1,0-10.8-5.2-10.8-12.8c-0.1-8.4,5.2-13.5,11.3-13.5c3.9,0,6.5,1.8,7.6,3.9h0.1v-15
H263.6z M259,32.6c0-0.6-0.1-1.4-0.2-1.9c-0.7-2.9-3.2-5.3-6.6-5.3c-4.7,0-7.5,4.2-7.5,9.7c0,5.1,2.5,9.3,7.4,9.3
c3.1,0,5.9-2,6.7-5.5c0.2-0.6,0.2-1.2,0.2-2V32.6z M282.4,12.9c2.2-0.4,5-0.7,8.7-0.7c4.5,0,7.8,1,9.8,2.9c1.9,1.7,3.1,4.2,3.1,7.3
c0,3.2-0.9,5.7-2.7,7.5c-2.4,2.5-6.3,3.9-10.7,3.9c-1.4,0-2.6-0.1-3.6-0.3v14.1h-4.5V12.9z M286.9,29.8c1,0.3,2.2,0.4,3.7,0.4
c5.5,0,8.8-2.7,8.8-7.5c0-4.6-3.3-6.9-8.3-6.9c-2,0-3.5,0.2-4.3,0.4V29.8z M322.6,47.5l-0.4-3.2H322c-1.4,2-4.1,3.7-7.7,3.7
c-5.1,0-7.7-3.6-7.7-7.2c0-6.1,5.4-9.4,15.1-9.4V31c0-2.1-0.6-5.8-5.7-5.8c-2.3,0-4.8,0.7-6.6,1.9l-1-3c2.1-1.4,5.1-2.2,8.3-2.2
c7.7,0,9.6,5.3,9.6,10.3v9.4c0,2.2,0.1,4.3,0.4,6H322.6z M321.9,34.7c-5-0.1-10.7,0.8-10.7,5.7c0,3,2,4.4,4.3,4.4
c3.3,0,5.4-2.1,6.1-4.2c0.2-0.5,0.3-1,0.3-1.5V34.7z M339,15.1v7.2h6.6v3.5H339v13.6c0,3.1,0.9,4.9,3.4,4.9c1.2,0,2.1-0.2,2.7-0.3
l0.2,3.4c-0.9,0.4-2.3,0.6-4.1,0.6c-2.1,0-3.9-0.7-4.9-1.9c-1.3-1.4-1.8-3.6-1.8-6.6V25.8h-3.9v-3.5h3.9v-6L339,15.1z M350.7,10.6
h4.6v15.7h0.1c0.7-1.3,1.9-2.4,3.3-3.2c1.4-0.8,3-1.3,4.7-1.3c3.4,0,8.8,2.1,8.8,10.8v15h-4.6V33.1c0-4.1-1.5-7.5-5.8-7.5
c-3,0-5.3,2.1-6.1,4.6c-0.3,0.6-0.3,1.3-0.3,2.2v15.2h-4.6V10.6z"/>
0

I would suggest you to check this out , this contains explanation using Sketch.

Exporting an SVG file from Sketch is easy—but the process of making an efficient and reliable SVG.

Visit https://medium.com/sketch-app-sources/the-best-way-to-export-an-svg-from-sketch-dd8c66bb6ef2

  • Hi @ishaanmalik, could you please explain a bit more what we’ll find behind the link you provide and why it answers the question? That way, your answer is still of value in case the link breaks at a later time. Link rot is the main reason we really dislike link-only answers here. Thanks for your effort and keep contributing! – curious Apr 29 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.