53
Marl3x
44d

Shrank the size a logo from 794kb to 5,27kb.
This was purely done to push my ego.

Comments
  • 4
    What about quality loss though...?

    EDIT: Oh. SVG. Nevermind.
  • 7
    That's a massive optimization, dude. Ggwp
  • 2
    @-ANGRY-STUDENT- fyi, the biggest optimization was removing metadata generated from Illustrator. This would normally be removed on export, but it wasn't in this case.
    I also removed some elements that are generated to be used and referenced, but it was only used once, so it was much longer to reference it.
    There were also unused attributes and small unnecessary elements.
    Later I traced the Logo and made a new one from scratch, because it had some weird shapes and corners. The shapes were just unnecessarily complex.
    And whilst playing around with the svg I saw that Illustator generates some points multiple times, for some reason. I deleted those per hand.
    And at the end I minified it with an online minifier.
  • 3
    Ahh i love this one. Its so fun converting pngs to svgs and then removing unnecessary layers.

    Wish i had known more about inkscape's uses and those dots/squares/the paths they generate.

    I was once reading about Spotify. A developer in their team was able to make their logo as adaptable! He converted their png logo of 900kb to some very small svg and then this svg to idk what format, but it would show as complete "#Spotify" (#= their logo circle) on bigger screens and just "#" on smaller screens
  • 1
    @StopWastingTime It was actually a SVG to begin with, just a very big one 😅
    Out Logo actually has the same format, do have a video or a post? It sounds interesting
  • 2
    @Marl3x nah , maybe it was an article on medium. Read it a long time ago. Will checkout my medium history when i again get back to my laptop
  • 2
    @StopWastingTime one way, you could embed some <style> with media queries inside the <svg>,

    I tried making this svg that change shapes (between rect and circle) if opened in desktop browser and resize the window,
    https://svgshare.com/i/HR7.svg

    here's an example snippet of the svg,
    https://codepen.io/anthesema/pen/...

    unfortunately when loaded in html, the svg will base the media query on the image size not the actual screen size,

    otherwise I think you could embed a separate css to the svg code as written here,
    https://oreillymedia.github.io/Usin...
Add Comment