4 ms·

It looks nice but the SVG generated seems incredibly big. Every ascii characters seems to be replaced by one svg element. (You can have a hint at this behaviou

by Rexxar 10y ago

It looks nice but the SVG generated seems incredibly big. Every ascii characters seems to be replaced by one svg element. (You can have a hint at this behaviour because some pixel are "more black" when an area is covered by two SVG elements) edit: killercup as made a similar comment with answer from the author, https://news.ycombinator.com/item?id=12621863 https://news.ycombinator.com/item?id=12621863

ivanceras 10y ago
because some pixel are "more black" when an area is covered by two SVG elements How can you possibly see that? This definitely needs a lot of more work on adding optimizer to reduce the elements into simplest form possible. Right now, this is just trying to put into screen what should it look like, it would be nice to have a more simplified SVG version up to primitive levels such as rect, circle, etc.
- Rexxar 10y ago
  How can you possibly see that? Short answer : I'm writing a drawing software and I've become pixel sensitive. Technical answer : you are creating 1 pixel wide horizontal/vertical line with integer coordinates. Sadly in SVG this mean you writing your line between two pixel lines. So you don't write 1 black pixel but two semi-transparent black pixels. On white background the result is two RGB(127,127,127) pixels. When two line overlaps you write semi-transparent black pixel twice and you end with two RGB(191,191,191) pixels. You can hide this behaviour by shifting everything by 0.5 or using a retina display.
  - artursapek 10y ago
    I noticed this too. I guess not everyone sees this kind of stuff? http://i.imgur.com/wfY6e5Z.png http://i.imgur.com/wfY6e5Z.png
    - mintplant 10y ago
      I definitely don't see that one: imgur says "Page not found".
      - FreeFull 10y ago
        The link works for me. Are you sure you don't have some sort of browser add-on that messes with imgur URLs?
        mintplant 10y ago
        Yep, I'm sure. It seems to be working now for me as well.
    - kalleboo 10y ago
      A lot of us are on HiDPI Macs where it doesn't happen http://i.imgur.com/olgPVRa.png http://i.imgur.com/olgPVRa.png
  - Freak_NL 10y ago
    > […] or using a retina display. Any HiDPI display will work, not just Apple's. Shifting by 0.5 in both directions is a quick win though.
  - saidajigumi 10y ago
    > using a retina display. ^^^ SO IMPORTANT. I returned to working with SVG seriously for a project last year, and was bitten by pixel-alignment rendering behavior along these lines. This was frustrating, as it was completely hidden during initial development by the fact that I was working on a retina-class display. On low-dpi, the rendering artifacts were quite noticeable. Compounding matters, the specifics varied by the SVG renderer (web browser) in use which also made it harder to identify the worst problem cases. Fortunately, it was noticed by an internal, design-sensitive user first!
skrebbel 10y ago
Is that a practical problem? Sounds like it would compress very well.
- vertex-four 10y ago
  Network isn't the only issue - speed of processing, and memory usage, are both things people should care about a lot more than they do. This is equivalent to wrapping every character of your website's text in a div, precisely positioning it - at a large enough scale, or with a dynamic page, it's just eventually going to cause performance issues or even lock-ups.
- artursapek 10y ago
  SVG images with lots of small individual objects don't perform very well (processing & rendering).
- XaspR8d 10y ago
  I dunno -- it was visually apparent to me immediately when I opened the page. I thought it was maybe a deliberate "dotted-line" effect at first.
chib 10y ago
line { shape-rendering: crispEdges; } This gets rid of the "more black" problem, but you lose the antialiasing effect which makes shapes with curves look horrible. Could try and apply it to only straight lines I suppose?
ivanceras 10y ago
Created a rust version https://github.com/ivanceras/svgbobrus https://github.com/ivanceras/svgbobrus

by Rexxar 10y ago

ivanceras 10y ago

because some pixel are "more black" when an area is covered by two SVG elements How can you possibly see that? This definitely needs a lot of more work on adding optimizer to reduce the elements into simplest form possible. Right now, this is just trying to put into screen what should it look like, it would be nice to have a more simplified SVG version up to primitive levels such as rect, circle, etc.

Rexxar 10y ago
How can you possibly see that? Short answer : I'm writing a drawing software and I've become pixel sensitive. Technical answer : you are creating 1 pixel wide horizontal/vertical line with integer coordinates. Sadly in SVG this mean you writing your line between two pixel lines. So you don't write 1 black pixel but two semi-transparent black pixels. On white background the result is two RGB(127,127,127) pixels. When two line overlaps you write semi-transparent black pixel twice and you end with two RGB(191,191,191) pixels. You can hide this behaviour by shifting everything by 0.5 or using a retina display.
- artursapek 10y ago
  I noticed this too. I guess not everyone sees this kind of stuff? http://i.imgur.com/wfY6e5Z.png http://i.imgur.com/wfY6e5Z.png
  - mintplant 10y ago
    I definitely don't see that one: imgur says "Page not found".
    - FreeFull 10y ago
      The link works for me. Are you sure you don't have some sort of browser add-on that messes with imgur URLs?
      - mintplant 10y ago
        Yep, I'm sure. It seems to be working now for me as well.
  - kalleboo 10y ago
    A lot of us are on HiDPI Macs where it doesn't happen http://i.imgur.com/olgPVRa.png http://i.imgur.com/olgPVRa.png
- Freak_NL 10y ago
  > […] or using a retina display. Any HiDPI display will work, not just Apple's. Shifting by 0.5 in both directions is a quick win though.
- saidajigumi 10y ago
  > using a retina display. ^^^ SO IMPORTANT. I returned to working with SVG seriously for a project last year, and was bitten by pixel-alignment rendering behavior along these lines. This was frustrating, as it was completely hidden during initial development by the fact that I was working on a retina-class display. On low-dpi, the rendering artifacts were quite noticeable. Compounding matters, the specifics varied by the SVG renderer (web browser) in use which also made it harder to identify the worst problem cases. Fortunately, it was noticed by an internal, design-sensitive user first!

skrebbel 10y ago

Is that a practical problem? Sounds like it would compress very well.

vertex-four 10y ago
Network isn't the only issue - speed of processing, and memory usage, are both things people should care about a lot more than they do. This is equivalent to wrapping every character of your website's text in a div, precisely positioning it - at a large enough scale, or with a dynamic page, it's just eventually going to cause performance issues or even lock-ups.
artursapek 10y ago
SVG images with lots of small individual objects don't perform very well (processing & rendering).
XaspR8d 10y ago
I dunno -- it was visually apparent to me immediately when I opened the page. I thought it was maybe a deliberate "dotted-line" effect at first.

chib 10y ago

line { shape-rendering: crispEdges; } This gets rid of the "more black" problem, but you lose the antialiasing effect which makes shapes with curves look horrible. Could try and apply it to only straight lines I suppose?

ivanceras 10y ago

Created a rust version https://github.com/ivanceras/svgbobrus https://github.com/ivanceras/svgbobrus