What's a good JavaScript-based solution to render SVG into an image? html2canvas doesn't work well with SVG, especially those heavily styled with CSS.
Shameless Plug for a library I helped write:
https://github.com/SVG-Edit/svgedit
Stanford CS248: Implement an SVG Rasterizer
21–30 of 82 posts
Re: Stanford CS248: Implement an SVG Rasterizer
#22What's a good JavaScript-based solution to render SVG into an image? html2canvas doesn't work well with SVG, especially those heavily styled with CSS.
Kinda defeats the whole purpose of SVG. Only photos should be bitmaps. Graphics should be vectors. This is the 21st century, folks...
Re: Stanford CS248: Implement an SVG Rasterizer
#23What's a good JavaScript-based solution to render SVG into an image? html2canvas doesn't work well with SVG, especially those heavily styled with CSS.
If you're not in a Node.js context, the Canvas API does a decent job of rasterizing SVGs nowadays. Once rasterized, you can call canvas.toDataURL() to get a download link. Here's a demo: https://codepen.io/hypothete/pen/WNvKLEE
Does the css need to be inlined?
Re: Stanford CS248: Implement an SVG Rasterizer
#242d graphics are kinda hard. The problem is that gpus don't support them out of the box so you have to do a Lot yourself.
Of course GPUs support 2D. It is just 3D with one less dimension.
Re: Stanford CS248: Implement an SVG Rasterizer
#25What's a good JavaScript-based solution to render SVG into an image? html2canvas doesn't work well with SVG, especially those heavily styled with CSS.
Kinda defeats the whole purpose of SVG. Only photos should be bitmaps. Graphics should be vectors. This is the 21st century, folks...
One reason is to generate screenshots of HTML by combining this technique with SVG .
Re: Stanford CS248: Implement an SVG Rasterizer
#26Earlier quoted context omitted.
If you're not in a Node.js context, the Canvas API does a decent job of rasterizing SVGs nowadays. Once rasterized, you can call canvas.toDataURL() to get a download link. Here's a demo: https://codepen.io/hypothete/pen/WNvKLEE
Does the css need to be inlined?
Re: Stanford CS248: Implement an SVG Rasterizer
#272d graphics are kinda hard. The problem is that gpus don't support them out of the box so you have to do a Lot yourself.
What do you mean GPUs don't support them? Most opengl tutorials I've read have people building triangles in 2d to learn fragment shaders and vertices before going 3d. Most of them also support parametric curves, so even hardware accelerated bezier curves should be possible.
Re: Stanford CS248: Implement an SVG Rasterizer
#28This is a good example of a CS project you would do at Stanford and wouldn't get assigned at your local university.
Re: Stanford CS248: Implement an SVG Rasterizer
#29What's a good JavaScript-based solution to render SVG into an image? html2canvas doesn't work well with SVG, especially those heavily styled with CSS.
Kinda defeats the whole purpose of SVG. Only photos should be bitmaps. Graphics should be vectors. This is the 21st century, folks...
True, but if you have digital display - that is, which have separate, immovable pixels, working with pixels and not with vector-based analog primitives - you'll eventually have to convert "vector" picture into "pixel" picture.
Re: Stanford CS248: Implement an SVG Rasterizer
#302d graphics are kinda hard. The problem is that gpus don't support them out of the box so you have to do a Lot yourself.
What do you mean GPUs don't support them? Most opengl tutorials I've read have people building triangles in 2d to learn fragment shaders and vertices before going 3d. Most of them also support parametric curves, so even hardware accelerated bezier curves should be possible.
Wait, why do you say GPUs support parametric curves? GPUs are based on triangles mostly.