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.
https://github.com/fabricjs/fabric.js
This looks great, will test it out, thx!
Stanford CS248: Implement an SVG Rasterizer
31–40 of 82 posts
Re: Stanford CS248: Implement an SVG Rasterizer
#32This is a good example of a CS project you would do at Stanford and wouldn't get assigned at your local university.
I talk to people who think a CS degree has the same content and the same level of rigour and challenge everywhere. Absolutely baffles me.
Re: Stanford CS248: Implement an SVG Rasterizer
#33What'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.
https://github.com/shakiba/svgexport Is that what you’re looking for?
No. It does a perfect job because Puppeteer is just Chrome, not JavaScript :) Thanks though!
Re: Stanford CS248: Implement an SVG Rasterizer
#34What'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...
I wish for that world to exist, but rasterized images are much easier to share and render nicely in iMessages etc.
Re: Stanford CS248: Implement an SVG Rasterizer
#35What'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
This looks so cool! But your demo link is broken :(
Re: Stanford CS248: Implement an SVG Rasterizer
#36Earlier 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?
Yup this is the problem. Workable but painful.
Re: Stanford CS248: Implement an SVG Rasterizer
#37This is a good example of a CS project you would do at Stanford and wouldn't get assigned at your local university.
You can easily do this on your own.
Re: Stanford CS248: Implement an SVG Rasterizer
#38This is a good example of a CS project you would do at Stanford and wouldn't get assigned at your local university.
You can easily do this on your own.
I think the spirit of the post is correct: the quality of instructors can dramatically increase the quality and relevance of course content in the curriculum. Stanford courses tend to produce new, interesting assignments that other schools crib. Same applies to all the top engineering departments.
My friend tried to get a CS degree at Pepperdine and the curriculum was 15 years out of date. To students who are new to the field, it is hard to figure out where to start even if they could do it independently.
Re: Stanford CS248: Implement an SVG Rasterizer
#39Earlier quoted context omitted.
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.
GPUs can take in way more than just triangles as input. There are particle simulation and even Ray tracing implemented on GPUs nowadays. Support for parametric curves was one of the more recent additions.
Re: Stanford CS248: Implement an SVG Rasterizer
#40Earlier quoted context omitted.
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.
GPU aren't based on anything. They are turing complete, you can run Linux on it if you wanted to.
What you are saying is outdated by maybe a couple of decades.