Wednesday, September 10, 2014

Text in SVG: 3nd Attempt (Size Reduction)

Several days ago I wrote about finally solving the text in SVG problem. The key was to pick an open-source font, obtain the woff and svg font files, convert those files into base64 data streams, and plop the whole thing inside the actual SVG itself. And it works!

Problem is, I overlooked the file size. My original PNG logo file is 20KB. The new SVG is 400KB. That's 2000% increase in size! And completely unacceptable to me. I set out to find ways to decrease the size.

My first find was the tspan element. This is an element, similar to HTML's span, which can be embedded in a text element. Instead of having a new text element for every enlarged letter, I can just wrapper those letters in a tspan element and use CSS to apply the font. This helps in rendering time, but unfortunately doesn't significantly change the file size (409KB to 408KB).

I then tried removing whitespace. It screwed up the file and didn't really save space.

My final idea was to look at the cause of the large size. The current SVG had both an SVG and WOFF font file embedded. Looking at the font size, it turns out that the SVG font files were huge. 120ish KB each, for the two fonts I'm using. And an SVG font is readable if one opens it in a text editor. It's kind of odd to look at, but I found a pattern, and I found saw each letter and typical character. I simply removed all characters that I'm not using for the logo. Doing this for both fonts and reencoding in base64 netted me a huge size reduction. The SVG logo is now down from 408KB to 120KB. That is still far larger than 20KB, but it's a gain I can live with given the sharpness benefits of SVG.

This does mean that if the text ever changes in the logo, I'm going to have to go back to my original font files and add or subtract certain characters. But the text is a company name, meaning it won't change often. I've texted in Chrome and Firefox on Android, along with Chrome, IE11, and Firefox on Windows. Take a look at the 408KG and 120KB versions below:

SVG 408KB:

SVG 120KB:

7 comments:

  1. Isn't it better to assemble the logo in Inkscape, then convert it to a path? (In more detail: create the logo with the help of the font tool, then 'Edit' -> 'Select All', and 'Path' -> 'Object to Path'.)

    The resulting SVG would be nearly half the size of what you have here...

    ReplyDelete
  2. I'm not sure. I tried using Inkscape but the file size ended up being much larger. The file size here has little to do with the logo, it's almost entire due to the embedded fonts. When I remove the fonts I get something like 10-20KB. However, I've been speaking with a reader of this post about further modifying the font files, which is going to get the file down to 50ish KB.

    ReplyDelete
  3. BANDAR JUDI SLOT PALING LENGKAP DENGAN 1 USERID BISA MEMAINKAN SEMUA PERMAINAN

    WELCOME BONUS UNTUK PERMAINAN SLOT 50% MAKSIMAL 1.000.000 IDR

    WELCOME BONUS UNTUK SEMUA JENIS PERMAINAN 20%

    TO DI JAMIN RENDAH !!!

    DEPOSIT BANK LOCAL :
    BCA - MANDIRI - BNI - BRI - DANAMON - JENIUS BTPN DLL

    DEPOSIT E-CASH :
    OVO - DANA - LINKAJA - GOPAY - SAKUKU

    DEPOSIT PULSA (DEPOSIT NON RATE/ALIAS TANPA POTONGAN) :
    -> TELKOMSEL
    -> XL / AXIS

    Demo SLOT
    Slot 888 Dragon

    LINK AKSES :
    Agen Togel
    Museumbola Slot Habanero







    ReplyDelete