GOPHERSPACE.DE - P H O X Y
gophering on hngopher.com
HN Gopher Feed (2017-11-26) - page 1 of 10
 
___________________________________________________________________
Super Tiny Website Logos in SVG
311 points by edent
https://shkspr.mobi/blog/2017/11/super-tiny-website-logos-in-svg/
-in-svg/
___________________________________________________________________
 
darekkay - 32 minutes ago
GitHub posted a write-up [0] on how they switched from icon fonts
to SVG icons. It's worth a read.[0] https://github.com/blog/2112
-delivering-octicons-with-svg
 
jordache - 7 hours ago
At what point does using a vector SVG is worse than raster image?
Level of image complexit, requiring a ton of path elements?the
Twitter logo can be create in basically 2 path elements.What if my
logo is much more complex? Is there a threshold at the complexity
of my image results in an SVG payload > than a properly compressed
raster image?
 
  thinkloop - 1 hours ago
  For tiny images like icons, where intricacies are hard to see,
  it's likely they will almost always be better in svg.Logos
  especially are generally by nature clean and simple to be able to
  quickly communicate brand through different mediums.From a
  practical sense, I'd be hard pressed to find a real logo/icon
  that wasn't better in SVG. Theoretically, of course there are
  limits, but the rule of thumb is strong: always use svg for logos
  and icons.
 
  agumonkey - 5 hours ago
  That's my issue with the svg reflex, re-rendering complex
  geometry is more demanding than byte copy. That said
  https://edent.github.io/SuperTinyIcons/tiny/twitter.svg is really
  really really simple. I had no idea svg.fill could encode such
  things, and expected a bad mix of overlapping ovals to create the
  illustration.Not bad
 
    edent - 5 hours ago
    I have made a "circles only" version of the Twitter logo - it's
    at https://shkspr.mobi/blog/2017/05/the-twitter-logo-as-svg-
    cir...It's a bit of a silly way to do it - and is probably more
    complex to render.
 
      agumonkey - 5 hours ago
      but easier to understand :)
 
  weego - 6 hours ago
  Yes there is
 
  MRSallee - 6 hours ago
  Yes, you can make an image that compresses to a smaller raster
  image vs. SVG, and complexity is a good way to do that.
  Especially possible if your image/logo isn?t just solid colors,
  but contains gradients or textures.I would guess, though, that if
  you make a logo that is larger as an SVG than a compressed
  raster, you?ve probably made a bad logo. Logos should be simple.
 
    Twirrim - 5 hours ago
    > Logos should be simple.Agreed.  Simple but important things
    to also consider with Logos include "What does it look like if
    printed in black and white?"  It's a bit outdated advice in
    some regards, based as much on letter headers, fax machines,
    and news print adverts, as anything else.  You'll notice that
    almost all memorable logos work really well in black and white,
    though.
 
      jordache - 3 hours ago
      "simple" that's a very subjective term.Is there a way to
      quantify simplicity in terms of SVG? Can we say number of
      points & number of paths?  What other constructs can be used
      to measure complexity?
 
      eru - 5 hours ago
      Black and white is a good exercise in general, eg also to
      check whether divers colourblind people will be ok.  Or when
      you want to carve your logo into metal or wood etc.
 
mgalka - 7 hours ago
Really cool. I've always wondered why nobody was doing this. Just
about every website in the world could benefit from it. Nice work!
 
abritinthebay - 9 hours ago
I love that people are rediscovering SVGI hope this gathers stream
and forces Google (and others, but especially Google) to fix the
bugs they have in the format
 
  erdle - 7 hours ago
  SVG is making a monster come back...  and we absolutely need
  Gmail to get onboard.
 
  stinky613 - 7 hours ago
  Could you elaborate on the bugs in SVG? Are there any usability
  issues beyond the bugs? I tried some cursory googling 'why not to
  use svg', 'svg bugs', etc and didn't really find any
  common/recurring.
 
    abritinthebay - 1 hours ago
    One of the most annoying bugs is Chrome?s utterly broken
    implementation of the Use element for SVG.That?s one of many,
    but it?s one they?ve know about for years.
 
    spiralganglion - 6 hours ago
    Historically, the SVG-related systems in most browsers haven't
    seen a lot of love, so it's lagged behind other web
    technologies. This seems to be getting better ? I know Safari
    just landed a nice 3x performance improvement to one of the SVG
    filters.Here's a handful of issues that I still encounter, due
    to cross-browser differences.  * You can't use the full range
    of CSS3 colors.   * You can't set certain style properties via
    CSS (requiring the use of attributes).   * You can't use self-
    closing tags for certain elements.   * Differing behaviour when
    you set an attribute to "null" (which is fine, it's just a
    gotcha)  SVG performance also varies wildly, more so than JS
    perf, HTML DOM perf, or CSS perf. This seems to correlate with
    the visual quality of the rendered result ? Chrome is the
    fastest but has excessive smoothing, poor sampling of scaled
    images, etc; Safari is the slowest but produces the cleanest
    result.
 
    tyingq - 7 hours ago
    I mentioned the issue with gradients in another comment.
    There's also a good presentation here on other issues:
    http://slides.com/sarasoueidan/tips-for-avoiding-common-
    svg-...Perhaps not all "bugs", but unexpected anyway.
 
  tyingq - 8 hours ago
  I wish they had implemented gradients in a way that didn't
  depend on uri fragments.  Not an issue with standalone svg
  images, but it means you have to manage namespace clashes for
  inline svg images.
 
    Tloewald - 7 hours ago
    I wish that CSS could be applied to them consistently.
 
      abritinthebay - 1 hours ago
      It mostly can, outside of browser bugs anyhow.The browser
      bugs are a big complication however
 
  NelsonMinar - 7 hours ago
  I love that SVG survived! It dates back to 1999 and was almost
  forgotten. When D3js first got started around 2010/2011 I was
  astonished that SVG support was so good in so many browsers; Mike
  had been using it even earlier with Protovis and Polymaps.
  Everything but IE had support as some sort of unnused vestigal
  thing. And then interactive visualizations started using SVG
  regularly and now it's vital again.
 
teej - 7 hours ago
In case anyone else was suspicious of the 20k file size for a
512x512 PNG with essentially two colors - it's way off. I dropped
it into Photoshop and exported as PNG and it spit out an identical
file that weighs in at 6k.
 
  dawnerd - 6 hours ago
  And if you run it through https://tinypng.com it should get down
  even smaller. PNG compresses surprisingly well when it?s
  basically two colors + alpha.
 
    Franciscouzo - 4 hours ago
    With the caveat that https://tinypng.com uses lossy
    compression.
 
    vladdanilov - 4 hours ago
      Photoshop: 6 705 bytes, 128 colors, 1-bit alpha only
    TinyPNG: 6 179 bytes, 92 colors   Optimage: 5 761 bytes, 154
    colors   TinyPNG + Optimage (lossless): 5 226 bytes, 92 colors
    https://imgur.com/a/X9DnJTinyPNG tends to use fewer colors. But
    its compressor is pretty suboptimal. I could reduce the image
    further by 15.4% with the tool I'm making
    (http://getoptimage.com).
 
      mrb - 2 hours ago
      3545 bytes: https://i.imgur.com/dHIaRh1.png Used Gimp to
      convert to 4-bit paletted colormap, and processed through
      optipng.The original PNG icon was very clearly suboptimal at
      20?225 bytes...
 
        ricardobeat - 1 hours ago
        Imgur converts everything both of you posted to JPEG...
 
          icebraining - 50 minutes ago
          What do you mean? It's serving me a PNG image.
 
      majewsky - 3 hours ago
      > 92 colorsI see 3 colors (blue, white, transparent).
 
        vladdanilov - 3 hours ago
        The rest are needed to keep anti-aliased shapes smooth.
 
  makapuf - 6 hours ago
  yes, was also curious why : it's 16bits per channel color
  encoding instead of a paletted image.
 
kekub - 8 hours ago
I have been using https://simpleicons.org for a while now. It is
super light and looks great. License is CC0. Although I prefer
inlining the icons over using  tags.
 
  edent - 8 hours ago
  That's a wonderful resource - thanks for sharing. I'm certainly
  going to incorporate them into future versions.
 
  aw3c2 - 7 hours ago
  You can minify those a lot. I tried some on
  https://jakearchibald.github.io/svgomg/ and got ~20%-30% without
  any visual changes.
 
  thinkloop - 2 hours ago
  Cool resource, what do the color codes mean? All the icons seem
  to be in black when you download them.I've never seen a CC0
  license before, looking it up, but if anyone knows what its
  about, feel free to share!Here is a resource of svgs of
  cryptocurrency icons:
  https://github.com/allienworks/cryptocoins/tree/master/SVG
 
    cokernel - 1 hours ago
    CC0 is Creative Commons's license for dedication to the public
    domain:https://creativecommons.org/publicdomain/zero/1.0/
 
      thinkloop - 1 hours ago
      It seems like one of the most permissive licenses, is it
      taking over MIT?
 
        semi-extrinsic - 1 hours ago
        As I understand it, "code licenses" like MIT and "content
        licenses" like Creative Commons have slightly different
        intended areas of application, and you shouldn't mix them.
        E.g. "linking" means different things for code and
        images.So you'd use e.g. CC0 for an icon set together with
        MIT license for some javascript/whatnot code that goes with
        your icons.
 
vanderZwan - 6 hours ago
I'm still a bit sad that Rapha?l.js never quite caught on[0]. Same
for its successor Snap[1]. I guess the main reason is that SVGs
themselves weren't quite popular (and I assume there were also a
few bugs) and take a proper illustrator to draw, compared to the
ease of fetching JPG assets off the internet.[0]
http://dmitrybaranovskiy.github.io/raphael/[1] http://snapsvg.io/
 
firefoxd - 5 hours ago
Where do we find a good SVG editor? That might be the reason the
mass hasn't switched to svg.
 
  nicky0 - 5 hours ago
  Sketch for Mac is excellent
 
    lordfosco - 4 hours ago
    I second that. While it definitely isn't on par with Adobe
    Illustrator regarding some very advanced features, Sketch is so
    rediculos easy to understand and beautiful to work with that it
    is nowadays my go to solution for design and layout work that
    was previously done with Photoshop, Illustrator and InDesign.
 
  arca_vorago - 5 hours ago
  Perhaps Inkscape?
 
    IshKebab - 4 hours ago
    Inkscape is ok. It has serious issues though - pretty terrible
    performance, confusing UI, still requires X11 on Mac, etc.
    Probably still the best free SVG editor but I'm not sure I'd go
    so far as to call it good.
 
      Bromskloss - 3 hours ago
      > confusing UIAnything particular you have in mind?
 
      Eduard - 3 hours ago
      Using it for years. Never experienced any of the mentioned
      problems
 
        majewsky - 3 hours ago
        The performance issues are real. Just open a complex SVG,
        select a few thousand elements with a rubberband selection,
        and see how everything slows to a crawl as it tries to
        render the outlines. If that is not slow, try manipulating
        that selection (e.g. scaling, rotating).
 
  edent - 5 hours ago
  I use https://inkscape.org/en/ on Linux. Works well enough for my
  needs.
 
[deleted]
 
phaed - 6 hours ago
> You could fit over 3,000 of these images on a floppy disk.So
small it will take you 20 seconds to count on an Abacus.
 
  tibu - 3 hours ago
  If you find a floppy disk or drive at all nearby :D
 
chrisweekly - 5 hours ago
Slight tangent, but for anyone coming late to the party, here?s a
sampling of why SVG matters:http://slides.com/sdrasner/svg-can-do-
that#/
 
  Mindless2112 - 3 hours ago
  I'd say that's a sampling of how SVG went wrong.What we wanted
  was a vector image format; what we got was PowerPoint.
 
amelius - 5 hours ago
But why, when I zoom in with my browser (using Ctrl-+) on that
page, the icons don't look sharp?EDIT: I mean the table.
 
  dave5104 - 5 hours ago
  The second Twitter icon (which is an SVG) looks very sharp when
  zoomed in. The table of other icons is a screenshot, not in SVG,
  so those won't look sharp when zooming in.
 
freshyill - 5 hours ago
They aren't all under 1KB, but there a few repos on GitHub hosting
all of the Font Awesome icons as SVG.Also, if you can avoid it,
don't use By using ability to manipulate them directly in the DOM, and to restyle
them.https://github.com/ivanvotti/font-awesome-
svg/tree/master/SV...
 
  grenoire - 5 hours ago
  Unfortunately you cannot reuse the icons that way, which does end
  up being wasteful unless you use compression.
 
    EvilTerran - 2 hours ago
    I believe you can define a  in one inline SVG, then
     it in another, so that'd be a way to achieve icon reuse.
    Not sure how good browser support is for that, though - there's
    probably quirks.
 
    thinkloop - 2 hours ago
    You can reuse inline icons with JS - for example if you made a
    react component of it.
 
aw3c2 - 7 hours ago
Very cool! I would advise to try minifying with svgomg, some icons
seem to benefit. Eg bitbucket.svg can be reduced by 20% without any
visual change.
 
  edent - 7 hours ago
  Most of them were already minimised with SVGO and svgcleaner. If
  you can make them smaller - I'd love a pull request :-)
 
    baybal2 - 4 hours ago
    Do you care about readability? Does ungzipped size counts or
    you assume that users will be using gzip?Here is DO logo that
    you can gzip down to 221b    label="DigitalOcean" viewBox="0 0 512 512"
    xmlns="http://www.w3.org/2000/svg" fill="#0080ff">     height="512" rx="15%" width="512" fill="#fff"/>     d="M256,391v85a220,220 0 1 0 -220,-220h85a135,135 0 1 1 135,135
    H51v-55h55v120h65V306h85z"/> Do you think it is ok to
    pull out newlines?
 
      edent - 4 hours ago
      In the readme, I've said that I want to keep newlines for
      readability. That helps with people learning about SVG.I'm
      not fussed about compressed size - but I'd certainly welcome
      a Pull Request if you've managed to shrink that icon.
 
        Bromskloss - 3 hours ago
        How about keeping readable versions in the repository,
        along with a script that compresses them? The compressed
        ones could be automatically served on a separate site.
 
          edent - 3 hours ago
          Could be fun! Please send a pull request.
 
ss64 - 7 hours ago
Someone should build a web service for delivering these social
icons. They could place a random selection of 3 or 4 popular social
icons on the page, and then, like AdSense the social sites could
pay to get an increased number of placements, with a percentage
paid back to the site owner.
 
foxhop - 2 hours ago
I wish I could submit my SVG, its not a hugely popular service but
it seems like this idea could be expanded.
 
helenius - 7 hours ago
Remember to always (every time) set width/height for the  tag,
otherwise it will fill the entire screen/container.
 
  ozaark - 3 hours ago
  Yes! Loading many sites without width/height set on mobile
  connections display a horrible jitter with logos and social icons
  polluting the entire screen initially.
 
vortico - 5 hours ago
Amazing! With SVG being supported on all browsers you should care
about today, it obsoletes icon fonts, which require the entire icon
set to be downloaded.Anyone know of a FontAwesome-like project,
ideally with a CDN, that serves SVG icons like Font Awesome has so
including them in a website is easy and compact?
 
  vogt - 3 hours ago
  As a designer I always recommend https://feathericons.com/ as an
  alternative to font awesome. All SVG, all with uniform sizing and
  a pretty diverse selection - not as diverse as FA, but still.
  Very pretty and not as widely adopted as FA.
 
  michaelbuckbee - 2 hours ago
  No CDN, but there's multiple repos of people taking the
  FontAwesome icons and converting them over to SVG.Here's the one
  I used: https://github.com/encharm/Font-Awesome-SVG-PNGAlso, the
  new "Font Awesome Pro" comes with all icons as SVG out of the box
  - https://fontawesome.com/Last, one annoyance (in the midst of
  many benefits) of using SVG instead of fonts as icons is that you
  can't change their color via CSS if you're including them via
  img src='file.svg'So I use BoxySVG. Boxy is to
  Illustrator as Acorn or Pixelmator are to Photoshop. A tightly
  focused editor that lets you do simple things (like edit colors)
  very rapidly and doesn't bog you down with a ton of extraneous
  features.https://boxy-svg.com/
 
    MayeulC - 2 hours ago
    I am pretty sure you can change a lot of SVG properties trough
    CSS (use "currentColor" to change the color, for example).There
    was a discussion about http://slides.com/sdrasner/svg-can-do-
    that/ some time ago, which gives some nice SVG styling
    examples.
 
      michaelbuckbee - 1 hours ago
      So the distinction is inlining SVGs vs referring to them like
      you would a png with an img src=filepath.svg|png in your
      HTML.It's handy to just treat them as you would images, but
      you lose some flexibility wrt being able to manipulate them
      via CSS b/c the browser now "thinks" of them like an
      image.This SO post has a clever workaround (with I'm sure
      more caveats wrt performance, etc) that will auto-inline your
      svgs that you need to manipulate so you can get a best of
      both worlds type situation
      going.https://stackoverflow.com/questions/24933430/img-src-
      svg-cha...
 
  jazoom - 3 hours ago
  I use these and inline them: https://materialdesignicons.comHuge
  selection of images.
 
  darekkay - 36 minutes ago
  Font Awesome 5 icons are available in SVG. However, it's still in
  beta and available only to backers via early access until it is
  released.https://fontawesome.com/
 
userbinator - 4 hours ago
I bet many of these would be even smaller in SWF, since that's a
very efficient (bit-packed, and then compressed) binary format
specifically designed for small filesize, as opposed to the textual
XML of SVG (although SVG is not really "XML-ish" in the sense that
path data is still a list of points, and not one-element-per-
point.)
 
  microcolonel - 4 hours ago
  SVG compresses reasonably well, especially if you're inlining it
  in a page with other SVGs, or using Brotli.