3 ms·

Annoyances with SVG: - Modularity is tough: you can nest <svg> or <g> elements with various transforms, but there's no first class layout concept. - Pixel imp

by thom 10y ago

Annoyances with SVG: - Modularity is tough: you can nest <svg> or <g> elements with various transforms, but there's no first class layout concept. - Pixel imperfections: browsers don't always render things 'nicely', and all sorts of horrid aliasing can happen. - Styling options: all sorts of simple stuff like a double outline of a shape is really difficult (without extremely complex filters) - Export: taking an SVG and exporting it as an image has lots of complications, especially with embedded fonts. All that said, the output is mostly okay, and it's possibly the easiest graphical technology to integrate with React-style frameworks.

taivare 10y ago
if anyone has a link etc. where I can find more / better info on exporting an SVG as a image. It would be appreciated.
- thom 10y ago
  https://github.com/exupero/saveSvgAsPng https://github.com/exupero/saveSvgAsPng
- ceautery 10y ago
  A poor man's version is to draw it onto a canvas and save the canvas, e.g.: var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'; i = new Image(); var cnv = document.createElement('canvas'); var ctx = cnv.getContext('2d'); i.onload = function() { ctx.drawImage(i, 0, 0); console.log(cnv.toDataURL()); } i.src = 'data:image/svg+xml;base64,'+ btoa(svg);
  - thom 10y ago
    Now copy across all styles, embed all fonts and external images etc etc etc. Nightmare.
dietrichepp 10y ago
Pixel imperfections is a long-running problem with vector rendering engines. You can name "SVG" as a culprit, but any other format would suffer from the same problems because it is an implementation problem rather than a specification problem. The straightforward approach is "here's a buffer, let's think of the vector image as a series of drawing commands in that buffer", but that approach usually converts coverage to alpha at each step. http://graphicdesign.stackexchange.com/questions/73601/is-there-a-reason-hillary-clintons-logo-has-hidden-notches http://graphicdesign.stackexchange.com/questions/73601/is-th... There are some interesting thoughts from nVidia on throwing GPU hardware at the problem. The specialized hardware on a GPU can handle coverage in a much more coherent way without paying a premium in processing and memory. http://developer.download.nvidia.com/assets/gamedev/files/An_Introduction_to_NV_path_rendering.pdf http://developer.download.nvidia.com/assets/gamedev/files/An...

by thom 10y ago

taivare 10y ago

if anyone has a link etc. where I can find more / better info on exporting an SVG as a image. It would be appreciated.

thom 10y ago
https://github.com/exupero/saveSvgAsPng https://github.com/exupero/saveSvgAsPng
ceautery 10y ago
A poor man's version is to draw it onto a canvas and save the canvas, e.g.: var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'; i = new Image(); var cnv = document.createElement('canvas'); var ctx = cnv.getContext('2d'); i.onload = function() { ctx.drawImage(i, 0, 0); console.log(cnv.toDataURL()); } i.src = 'data:image/svg+xml;base64,'+ btoa(svg);
- thom 10y ago
  Now copy across all styles, embed all fonts and external images etc etc etc. Nightmare.

dietrichepp 10y ago

Pixel imperfections is a long-running problem with vector rendering engines. You can name "SVG" as a culprit, but any other format would suffer from the same problems because it is an implementation problem rather than a specification problem. The straightforward approach is "here's a buffer, let's think of the vector image as a series of drawing commands in that buffer", but that approach usually converts coverage to alpha at each step. http://graphicdesign.stackexchange.com/questions/73601/is-there-a-reason-hillary-clintons-logo-has-hidden-notches http://graphicdesign.stackexchange.com/questions/73601/is-th... There are some interesting thoughts from nVidia on throwing GPU hardware at the problem. The specialized hardware on a GPU can handle coverage in a much more coherent way without paying a premium in processing and memory. http://developer.download.nvidia.com/assets/gamedev/files/An_Introduction_to_NV_path_rendering.pdf http://developer.download.nvidia.com/assets/gamedev/files/An...