1

I actually am trying to make a simple logo for my website and was thinking of using inline SVG for the logo. I made it with illustrator but the path code is too long, not like I see on other sites. On other sites, it is much small and compressed, but when I am outputting the SVG code it is too big.

I even tried the simply path option, it did not help.

This is the code and I could not figure out any way to reduce its SVG path size. Usually, most sites have a very compressed SVG path size while their logo contains more paths and anchor points.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="224" height="32" viewBox="0 0 224 32"><path d="M11.21,8h.08a4.27,4.27,0,0,1,.94-1,2.11,2.11,0,0,1,1.28-.35h8.11q3.6,0,3.6,3a8.26,8.26,0,0,1-.27,2l-2.3,9.31c-.23,1-.39,1.76-.48,2.39A12.27,12.27,0,0,0,22,25H14.62a10.15,10.15,0,0,0,.7-1.69A24,24,0,0,0,16,20.89l2.45-10a2.2,2.2,0,0,0,.12-.62c0-.47-.31-.7-.92-.7H12a1.4,1.4,0,0,0-1,.29,2.06,2.06,0,0,0-.52,1L8,20.89c-.23,1-.39,1.76-.48,2.39A12.35,12.35,0,0,0,7.42,25H0a11,11,0,0,0,.71-1.69c.21-.65.44-1.47.67-2.46L5.47,4.15c.23-1,.4-1.76.5-2.39A11.2,11.2,0,0,0,6.12,0h7Z"/><path d="M23.61,32,24,28.67A6.7,6.7,0,0,0,25.5,29a21.54,21.54,0,0,0,2.4.11h8.57a2.05,2.05,0,0,0,1.37-.39,2.79,2.79,0,0,0,.73-1.48l1-4.15L39.53,23a4.87,4.87,0,0,1-1.15,1.57,2.29,2.29,0,0,1-1.49.47H28.81a3.72,3.72,0,0,1-2.54-.79,2.79,2.79,0,0,1-.9-2.23,5.74,5.74,0,0,1,.15-1.25L28.39,9a6.92,6.92,0,0,0,.19-1.68V7a2.88,2.88,0,0,1,0-.35h7.07L32.1,21.16a.41.41,0,0,1,0,.16v.12c0,.47.26.7.8.7h5.82a1.26,1.26,0,0,0,1.37-1L43,9a6.92,6.92,0,0,0,.19-1.68V7a3.39,3.39,0,0,1,0-.35h7.08L45.34,26.8a7.47,7.47,0,0,1-2.1,3.91A5.12,5.12,0,0,1,39.72,32Z"/><path d="M59.5,8.37h.08a4,4,0,0,1,1-1.25,2.11,2.11,0,0,1,1.32-.47h8.34q3.6,0,3.6,3a8.26,8.26,0,0,1-.27,2l-2.1,8.53a6.87,6.87,0,0,1-2,3.73A5.46,5.46,0,0,1,65.78,25h-8c-.59,0-1-.13-1.15-.39a2.82,2.82,0,0,1-.53-1.49h-.15l-1.15,4.69c-.23,1-.39,1.76-.48,2.39A12.35,12.35,0,0,0,54.14,32h-7l5.17-21.2c.23-1,.39-1.76.48-2.39a12.38,12.38,0,0,0,.13-1.76h6.66Zm.88,1.18a1.37,1.37,0,0,0-1,.29,2.06,2.06,0,0,0-.52,1l-2.41,9.94a2.26,2.26,0,0,0-.12.63c0,.47.32.7,1,.7h5.89a1.36,1.36,0,0,0,1-.29,2.28,2.28,0,0,0,.5-1l2.41-9.94a2.53,2.53,0,0,0,.11-.62c0-.47-.3-.7-.92-.7Z"/><path d="M81.7,17.53l-.81,3.28a2.6,2.6,0,0,0-.11.63c0,.47.32.7,1,.7h11.6a12.63,12.63,0,0,0,2.14-.23L94.17,25H77.72q-3.6,0-3.6-3a8.25,8.25,0,0,1,.27-1.95l2.1-8.53a6.9,6.9,0,0,1,2-3.74,5.51,5.51,0,0,1,3.69-1.19H94.67q3.58,0,3.59,3a8.75,8.75,0,0,1-.26,2l-1.46,6Zm8.87-2.9.92-3.76a2.2,2.2,0,0,0,.12-.62c0-.47-.31-.7-.92-.7H84.8a1.4,1.4,0,0,0-1,.29,2.06,2.06,0,0,0-.52,1l-.92,3.76Z"/><path d="M116.29,10.72c-.67-.13-1.28-.23-1.84-.29a23.44,23.44,0,0,0-2.6-.1h-2.53a1.24,1.24,0,0,0-1.38,1l-2.37,9.58c-.23,1-.39,1.76-.48,2.39A12.27,12.27,0,0,0,105,25H97.54a10.15,10.15,0,0,0,.7-1.69c.22-.65.44-1.47.67-2.46L101.4,10.8c.23-1,.39-1.76.48-2.39A12.38,12.38,0,0,0,102,6.65h6.39l-.19,2h.08a2.67,2.67,0,0,1,1.19-1.55,4.93,4.93,0,0,1,2.37-.45h5.43Z"/><path d="M137.1,20.93q-1,4.11-5.58,4.11H116.21l.27-3.17a6.54,6.54,0,0,0,1.59.35c.54.05,1.44.08,2.69.08h8.12a1.55,1.55,0,0,0,1.68-1.22l.27-1v-.16c0-.08,0-.13,0-.15,0-.6-.4-.9-1.19-.9h-8.46q-3.14,0-3.14-2.94a9.34,9.34,0,0,1,.27-2.07l.58-2.23q1.18-5,5.28-5h15.88l-.27,3.17a6.09,6.09,0,0,0-1.57-.35c-.56-.06-1.45-.08-2.68-.08h-8.42a1.33,1.33,0,0,0-1.45,1.09l-.23.86v.2a.54.54,0,0,0,0,.2c0,.47.32.7,1,.7h8.19c2.52,0,3.79.93,3.79,2.78a5.37,5.37,0,0,1-.2,1.33Z"/><path d="M147.05,20.89c-.23,1-.39,1.76-.48,2.39a12.27,12.27,0,0,0-.13,1.76H139a10.15,10.15,0,0,0,.7-1.69c.22-.65.44-1.47.67-2.46l4.1-16.74c.23-1,.39-1.76.49-2.39A10.18,10.18,0,0,0,145.14,0h7Z"/><path d="M157.73,17.53l-.81,3.28a2.6,2.6,0,0,0-.11.63c0,.47.32.7.95.7h11.6a12.63,12.63,0,0,0,2.14-.23L170.2,25H153.75q-3.6,0-3.6-3a8.25,8.25,0,0,1,.27-1.95l2.1-8.53a6.9,6.9,0,0,1,2-3.74,5.51,5.51,0,0,1,3.69-1.19H170.7q3.59,0,3.59,3a8.75,8.75,0,0,1-.26,2l-1.46,6Zm8.87-2.9.92-3.76a2.2,2.2,0,0,0,.12-.62c0-.47-.31-.7-.92-.7h-5.89a1.4,1.4,0,0,0-1,.29,2.06,2.06,0,0,0-.52,1l-.92,3.76Z"/><path d="M182.14,17.53l-.81,3.28a2.6,2.6,0,0,0-.11.63c0,.47.32.7,1,.7h11.59a12.53,12.53,0,0,0,2.14-.23L194.61,25H178.16q-3.6,0-3.6-3a8.25,8.25,0,0,1,.27-1.95l2.1-8.53a6.9,6.9,0,0,1,2-3.74,5.54,5.54,0,0,1,3.7-1.19h12.47q3.6,0,3.6,3a8.26,8.26,0,0,1-.27,2l-1.45,6Zm8.88-2.9.92-3.76a2.53,2.53,0,0,0,.11-.62c0-.47-.31-.7-.92-.7h-5.89a1.4,1.4,0,0,0-1,.29,2.06,2.06,0,0,0-.51,1l-.92,3.76Z"/><path d="M224,6.65a6.62,6.62,0,0,0-.63.33l-1.24.75q-.88.52-2.34,1.44c-1,.62-2.22,1.39-3.75,2.33l3.22,10.84a9.67,9.67,0,0,0,.55,1.27,14.28,14.28,0,0,0,.82,1.43h-7.8L210,15.53l-3.14,2L206,20.89c-.23,1-.39,1.76-.48,2.39A12.35,12.35,0,0,0,205.4,25H198a10.12,10.12,0,0,0,.71-1.69c.21-.65.44-1.47.67-2.46l4.09-16.74c.23-1,.4-1.76.5-2.39A11.2,11.2,0,0,0,204.1,0h7l-3.4,13.89L217,7.82a2.85,2.85,0,0,0,1.11-1.17Z"/></svg>
9
  • 1
    Welcome! Unfortunately, you aren't giving us anything to work with. There's no blanket "reduce SVG code" command.. we need to see the SVG XML or the artwork, something.
    – Scott
    Commented Nov 16, 2021 at 5:48
  • @Scott just edited the question. Please check! Commented Nov 16, 2021 at 6:49
  • Dunno.. looks pretty clean to me. each glyph has a path element, 10 paths. Not sure how you could reduce it to fewer paths.
    – Scott
    Commented Nov 16, 2021 at 6:52
  • Is it fine to be used as inline SVG for logo on my website? The output code is too large. I was wishing if I could compress it a bit. Commented Nov 16, 2021 at 6:58
  • 1
    4kb is nothing. NO need to worry
    – joojaa
    Commented Nov 16, 2021 at 7:36

1 Answer 1

1

Simplifying won't work for this because Illustrator knows nothing about how to preserve the shapes of letters.

I'm not suggesting you do this, because 4kb for an SVG is not large anyway. The SVG you already have will work just fine as an inline SVG on a web page. I include the following solution only because it is possible to reduce the size further.

You could edit the paths manually to remove the redundant anchors between the curves, remove the ink traps, and manually readjust the Bézier curve handles. This would reduce the SVG size a little, but not by much, perhaps less than a third. It might not be worth the trouble to save perhaps just 1 kb though. You'd need to edit every letter manually. Combining all the paths to a compound path will also help a little.

Here's an example with the letter P showing the anchors which could be removed (left), and the result (right).

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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