8 ms·

It's so funny this article features a timeline graphic that's a PNG with a lot of text on it. On Firefox + M1 Macbook, the first image is not up to scale for hi

It's so funny this article features a timeline graphic that's a PNG with a lot of text on it. On Firefox + M1 Macbook, the first image is not up to scale for high resolution screens and each pixel is blurry, rendering the font hardly readable. Then the article continues with some SVG code... oops?

acornall 3y ago
Good catch, we've updated the graphic to use an SVG :) ~ Cheers
evrimoztamur 3y ago
With SVG support at a near-full coverage (and 99.99% for Canva's user base, https://caniuse.com/svg https://caniuse.com/svg) you do wonder why we see less SVG for graphics like this. It's literally easier to export, and no harder to import than PNGs.
- lifthrasiir 3y ago
  Kinda because it's harder to make a good SVG editor, and also a clean SVG is substantially harder to export and thus SVG is only seen as an authoring format.
  - xcdzvyn 3y ago
    This was downvoted but I think it's true. I find it way easier to throw something together in a raster editor than e.g. Inkscape. I want to draw. With pixels. Not huge bezier curves.
    - al_borland 3y ago
      I took the time many years ago to learn how to effectively draw with bezier curves. It was not time well spent. A good tool in my tool belt for the moment, but it was very much a use it or lose it skill. I tried to do something recently and it was like starting from square one, so I just used raster. Unless someone is doing this stuff professionally everyday, or they are really into it as a hobby, it’s not worth it. I assume this is simply a software problem that could be solved with a better UI, but who knows if that will ever be solved.
      - wongarsu 3y ago
        On the other hand the people doing this professionally everyday are producing mostly vector graphics, just in Illustrator rather than Inkscape. They still export as png or jpeg, the vector versions only go to print (in formats like eps or pdf, not svg)
        dhosek 3y ago
        I always preferred working in Illustrator over Photoshop back when I did more design work, but then I was also almost always targeting print.
      - egypturnash 3y ago
        I work with Illustrator on a daily basis. Drawing everything with the pen tool is about as effective as opening up a 300dpi canvas in Photoshop and placing every pixel by hand with the pencil tool. There’s a bunch of tools for creating and editing paths at a higher level than thinking about every control point, just as Photoshop has a bunch of tools for creating and editing huge numbers of pixels in very complex ways. It is useful for me to know how to think about individual control points, but it is rare for me to need to do this.
        al_borland 3y ago
        Things have probably improved, and/or dedicated vector apps have better options I haven’t invested time it. Learning curves abound… I did this in Photoshop so I could improve my selections and make them smooth. This was also back around 2006 if I had to guess. At the time, when I looked up what to do, all I found was learning how to use the control points, so that’s what I did. What would be a keyword to look for to find the more modern way, if I’m not looking to go down a rabbit hole or learning all the possible options to find those bits?
    - evrimoztamur 3y ago
      I actually use Inkscape religiously for making diagrams or even UI mockups, an particularly in love with Bézier curves. To each their own!
      - eurekin 3y ago
        Another fellow Bezier enthusiast here! I fell down deep into the rabbit hole of Beziers in the Rhinoceros modelling app. There is something special about clean higher order curvature continuity across shapes. It's simply beautiful. That said, I have big issues with learning any other tool. So much of the app interface learning was required to be able to freely draw... I really do see, why the bitmap simplicity wins over in "I just need to have it done; needs to be published by x" cases
  - Zetobal 3y ago
    The same goes for webp normal people don't know what to do with them.
  - kragen 3y ago
    i was appalled to discover yesterday that when i did a simple plot in matplotlib the resulting svg was mostly letterforms for deja vu sans expressed as svg paths at least it did subset the font
    - deleted 3y ago
      [deleted]
    - jacobolus 3y ago
      Try encoding it the obvious way as text instead and view your SVG file on different renderers, and you will often find that they messed up the fonts/text layout. This is a defensive practice to ensure that your plot will look the way you intended.
      - kragen 3y ago
        yes, i understand why it's done, and i agree that svg doesn't offer a better alternative. that's because the only fonts svg guarantees the existence of are Serif, Sans-Serif, Monospace, Cursive, and Fantasy, none of which have guaranteed metrics. the reason i was surprised and appalled is that both of adobe's previous standards in the line from which svg descends (postscript and pdf) avoid that problem by guaranteeing the availability of certain core fonts with (in practice, though not in theory) well-defined standard metrics, and it makes svg a much worse standard for small images that include text with pdf.use14corefonts and ps.useafm turned on in matplotlib, my plot from http://canonical.org/~kragen/sw/dev3/plotrc.py http://canonical.org/~kragen/sw/dev3/plotrc.py is 8k as eps, 9k as pdf, 21k as png http://canonical.org/~kragen/sw/dev3/rc.png http://canonical.org/~kragen/sw/dev3/rc.png, and 24k as svg (with optipng the png shrinks to 16k but you could definitely optimize the other formats too; matplotlib fills all of them with ridiculous amounts of bloat. but the embedded font is most of it, and it's only necessary in svg) like, you really have to fuck your vector file format up for it to make a simple line plot format larger in it than as an antialiased png or for it to make it three times larger than a fairly shitty eps or pdf i like svg a lot (it's replaced postscript for me as the language i use for easy 2-d vector graphics) but it has some really serious deficiencies. this one is news to me; the other one i've run into is that there's no defined real-world scale, so i can't send an svg to a laser-cutting shop and ask them to cut it out at 1× or 2× scale. i have to use pdf or eps or dxf for that
- Etheryte 3y ago
  From personal experience and having been burned by odd SVG bugs too many times over the years, a dumb image is simple, it works and you know that it works. I only reach for SVG when I need to do something that other formats cannot.
  - Hendrikto 3y ago
    > I only reach for SVG when I need to do something that other formats cannot. Like rendering actual text?
    - jacobolus 3y ago
      From one implementation to another and depending on the way the SVG was encoded, text in an SVG often does not look the same for different viewers. This can seriously mess up the layout of diagrams, etc.
      - pennomi 3y ago
        Plus SVG can’t properly wrap text, which matters for some use cases.
        int_19h 3y ago
        If you're rendering a PNG, you're already doing layout, so you might as well still do it but at least keep the individual glyphs as, well, glyphs (so that they scale to high DPI etc).
    - dunham 3y ago
      At one point, SVG couldn't do that. It was a long time ago, but I recall not being able to use SVG to render sideways text because the text tag wasn't supported by browsers. For IE, we had a PNG font that we displayed slices of, and then we migrated to rotation css as various browsers supported it. (I think IE was the last holdout, but it's been a while.)
  - kungreke 3y ago
- chiefalchemist 3y ago
  On Canva free plan, afaik, there is no export to SVG. If there is, I can't find it. Maybe the paid tiers have it? IDK. The point is, they likely used their own tool and that tool's support for SVG is lacking.
  - input_sh 3y ago
    I know that transparent PNG exports are paywalled, I don't think they offer SVG.
  - bombcar 3y ago
    Even when "export to SVG" is available, you often have problems if you can't force it to export (amusingly enough) fonts as vectors instead of referring to fonts by name, etc. Makes the file larger, but makes it render (mostly) correctly on any system. There can still be discrepancies, however.
- chrisweekly 3y ago
  See also https://slides.com/sdrasner/svg-can-do-that https://slides.com/sdrasner/svg-can-do-that which despite its age (over 6y!) is still impressive.
- oefrha 3y ago
  You need to export all the text as curves to get predictable font and rendering (the fonts used in the image obviously aren’t your regular web-safe fonts), and that’s not gonna be small with a lot of text.
chiefalchemist 3y ago
Or find a markup-based way to display that info. Text-based images can also often have accessiblity issues. It's best, when possible, to sidestep such images and use markup. Even a SVG afaik, might run into accessibility issue if not marked up correctly.
panzi 3y ago
I made myself a bookmarklet for that situation that sets image-rendering: pixelated. Beats blurry low res images, IMO: javascript:void(document.body.style.imageRendering='pixelated')

acornall 3y ago

Good catch, we've updated the graphic to use an SVG :) ~ Cheers

evrimoztamur 3y ago

With SVG support at a near-full coverage (and 99.99% for Canva's user base, https://caniuse.com/svg https://caniuse.com/svg) you do wonder why we see less SVG for graphics like this. It's literally easier to export, and no harder to import than PNGs.

lifthrasiir 3y ago
Kinda because it's harder to make a good SVG editor, and also a clean SVG is substantially harder to export and thus SVG is only seen as an authoring format.
- xcdzvyn 3y ago
  This was downvoted but I think it's true. I find it way easier to throw something together in a raster editor than e.g. Inkscape. I want to draw. With pixels. Not huge bezier curves.
  - al_borland 3y ago
    I took the time many years ago to learn how to effectively draw with bezier curves. It was not time well spent. A good tool in my tool belt for the moment, but it was very much a use it or lose it skill. I tried to do something recently and it was like starting from square one, so I just used raster. Unless someone is doing this stuff professionally everyday, or they are really into it as a hobby, it’s not worth it. I assume this is simply a software problem that could be solved with a better UI, but who knows if that will ever be solved.
    - wongarsu 3y ago
      On the other hand the people doing this professionally everyday are producing mostly vector graphics, just in Illustrator rather than Inkscape. They still export as png or jpeg, the vector versions only go to print (in formats like eps or pdf, not svg)
      - dhosek 3y ago
        I always preferred working in Illustrator over Photoshop back when I did more design work, but then I was also almost always targeting print.
    - egypturnash 3y ago
      I work with Illustrator on a daily basis. Drawing everything with the pen tool is about as effective as opening up a 300dpi canvas in Photoshop and placing every pixel by hand with the pencil tool. There’s a bunch of tools for creating and editing paths at a higher level than thinking about every control point, just as Photoshop has a bunch of tools for creating and editing huge numbers of pixels in very complex ways. It is useful for me to know how to think about individual control points, but it is rare for me to need to do this.
      - al_borland 3y ago
        Things have probably improved, and/or dedicated vector apps have better options I haven’t invested time it. Learning curves abound… I did this in Photoshop so I could improve my selections and make them smooth. This was also back around 2006 if I had to guess. At the time, when I looked up what to do, all I found was learning how to use the control points, so that’s what I did. What would be a keyword to look for to find the more modern way, if I’m not looking to go down a rabbit hole or learning all the possible options to find those bits?
  - evrimoztamur 3y ago
    I actually use Inkscape religiously for making diagrams or even UI mockups, an particularly in love with Bézier curves. To each their own!
    - eurekin 3y ago
      Another fellow Bezier enthusiast here! I fell down deep into the rabbit hole of Beziers in the Rhinoceros modelling app. There is something special about clean higher order curvature continuity across shapes. It's simply beautiful. That said, I have big issues with learning any other tool. So much of the app interface learning was required to be able to freely draw... I really do see, why the bitmap simplicity wins over in "I just need to have it done; needs to be published by x" cases
- Zetobal 3y ago
  The same goes for webp normal people don't know what to do with them.
- kragen 3y ago
  i was appalled to discover yesterday that when i did a simple plot in matplotlib the resulting svg was mostly letterforms for deja vu sans expressed as svg paths at least it did subset the font
  - deleted 3y ago
    [deleted]
  - jacobolus 3y ago
    Try encoding it the obvious way as text instead and view your SVG file on different renderers, and you will often find that they messed up the fonts/text layout. This is a defensive practice to ensure that your plot will look the way you intended.
    - kragen 3y ago
      yes, i understand why it's done, and i agree that svg doesn't offer a better alternative. that's because the only fonts svg guarantees the existence of are Serif, Sans-Serif, Monospace, Cursive, and Fantasy, none of which have guaranteed metrics. the reason i was surprised and appalled is that both of adobe's previous standards in the line from which svg descends (postscript and pdf) avoid that problem by guaranteeing the availability of certain core fonts with (in practice, though not in theory) well-defined standard metrics, and it makes svg a much worse standard for small images that include text with pdf.use14corefonts and ps.useafm turned on in matplotlib, my plot from http://canonical.org/~kragen/sw/dev3/plotrc.py http://canonical.org/~kragen/sw/dev3/plotrc.py is 8k as eps, 9k as pdf, 21k as png http://canonical.org/~kragen/sw/dev3/rc.png http://canonical.org/~kragen/sw/dev3/rc.png, and 24k as svg (with optipng the png shrinks to 16k but you could definitely optimize the other formats too; matplotlib fills all of them with ridiculous amounts of bloat. but the embedded font is most of it, and it's only necessary in svg) like, you really have to fuck your vector file format up for it to make a simple line plot format larger in it than as an antialiased png or for it to make it three times larger than a fairly shitty eps or pdf i like svg a lot (it's replaced postscript for me as the language i use for easy 2-d vector graphics) but it has some really serious deficiencies. this one is news to me; the other one i've run into is that there's no defined real-world scale, so i can't send an svg to a laser-cutting shop and ask them to cut it out at 1× or 2× scale. i have to use pdf or eps or dxf for that
Etheryte 3y ago
From personal experience and having been burned by odd SVG bugs too many times over the years, a dumb image is simple, it works and you know that it works. I only reach for SVG when I need to do something that other formats cannot.
- Hendrikto 3y ago
  > I only reach for SVG when I need to do something that other formats cannot. Like rendering actual text?
  - jacobolus 3y ago
    From one implementation to another and depending on the way the SVG was encoded, text in an SVG often does not look the same for different viewers. This can seriously mess up the layout of diagrams, etc.
    - pennomi 3y ago
      Plus SVG can’t properly wrap text, which matters for some use cases.
      - int_19h 3y ago
        If you're rendering a PNG, you're already doing layout, so you might as well still do it but at least keep the individual glyphs as, well, glyphs (so that they scale to high DPI etc).
  - dunham 3y ago
    At one point, SVG couldn't do that. It was a long time ago, but I recall not being able to use SVG to render sideways text because the text tag wasn't supported by browsers. For IE, we had a PNG font that we displayed slices of, and then we migrated to rotation css as various browsers supported it. (I think IE was the last holdout, but it's been a while.)
- kungreke 3y ago
chiefalchemist 3y ago
On Canva free plan, afaik, there is no export to SVG. If there is, I can't find it. Maybe the paid tiers have it? IDK. The point is, they likely used their own tool and that tool's support for SVG is lacking.
- input_sh 3y ago
  I know that transparent PNG exports are paywalled, I don't think they offer SVG.
- bombcar 3y ago
  Even when "export to SVG" is available, you often have problems if you can't force it to export (amusingly enough) fonts as vectors instead of referring to fonts by name, etc. Makes the file larger, but makes it render (mostly) correctly on any system. There can still be discrepancies, however.
chrisweekly 3y ago
See also https://slides.com/sdrasner/svg-can-do-that https://slides.com/sdrasner/svg-can-do-that which despite its age (over 6y!) is still impressive.
oefrha 3y ago
You need to export all the text as curves to get predictable font and rendering (the fonts used in the image obviously aren’t your regular web-safe fonts), and that’s not gonna be small with a lot of text.

chiefalchemist 3y ago

Or find a markup-based way to display that info. Text-based images can also often have accessiblity issues. It's best, when possible, to sidestep such images and use markup. Even a SVG afaik, might run into accessibility issue if not marked up correctly.

panzi 3y ago

I made myself a bookmarklet for that situation that sets image-rendering: pixelated. Beats blurry low res images, IMO: javascript:void(document.body.style.imageRendering='pixelated')