
Stanford CS248: Implement an SVG Rasterizer - adamnemecek
https://github.com/stanford-cs248/draw-svg
======
bhl
Same author (kayvonf) was behind this post, "Do Grades Matter? A Discussion
About Thinking Bigger While at CMU" [1], a while back :).

[1]
[https://news.ycombinator.com/item?id=14694179](https://news.ycombinator.com/item?id=14694179)

------
mfabbri77
I've already implemented an SVG renderer at
[https://www.amanithsvg.com](https://www.amanithsvg.com) based on our openvg
engine with software rasterization
[https://www.amanithvg.com](https://www.amanithvg.com)

Both are closed source, but there are evaluation version available, if someone
is interested in compare rendering quality and speed.

~~~
zerr
Why did you name a closed source product openX? :)

~~~
mfabbri77
The name is AmanithVG and it is an implementation of OpenVG (a standard API
for 2D vector graphics from Khronos group).

------
rayshan
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.

~~~
dublin
Kinda defeats the whole purpose of SVG. Only photos should be bitmaps.
Graphics should be vectors. This is the 21st century, folks...

~~~
avmich
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.

------
bitL
Is there a similar course about Boolean operations on general Bezier shapes
out there somewhere? Thanks!

~~~
lawrenceyan
Check out
[https://cs184.eecs.berkeley.edu/sp20](https://cs184.eecs.berkeley.edu/sp20)

That's the class I'm currently taking.

------
rpasquay
Is there any good book/resource about how all that fancy stuff you can use in
Inkscape/Illustrator is actually implemented in terms of rendering. E.g. how
are curves and lines with a thickness rendered or shapes that are defined by
boolean operations etc. ?

------
iamkeyur
Does anyone know similar courses where you get to do similar kind of practical
assignments?

~~~
boulos
CS148 [1] varies from year to year (most people complained that I made the
final assignment on subdivision surfaces too hard, but I had at least a few
"Thank you, this was awesome") and is the pre-cursor to 248. I'd recommend it
if you're getting started.

If you like ray tracing, Cem Yuksel currently teaches most of the related
courses at Utah [2].

[1]
[http://web.stanford.edu/class/cs148/assignments.html](http://web.stanford.edu/class/cs148/assignments.html)

[2] [http://www.cemyuksel.com/courses/](http://www.cemyuksel.com/courses/)

~~~
bjt
Sometimes I kick myself for not doing CS while I was at Utah. :(

~~~
boulos
There's tons of material online now. If you want a "traditional Utah graphics"
curriculum, Cem is teaching most of the stuff (with updates!) from 15 years
ago. You can also probably find the old course slides and assignments. I'd
suggest cs6620, personally:

[https://graphics.cs.utah.edu/courses/cs6620/fall2019/](https://graphics.cs.utah.edu/courses/cs6620/fall2019/)

------
julius_set
As an alternative if you build SDKs or do work in gaming, mobile, or anything
involving images really you will end up understanding / implementing this or
more than this.

------
tinus_hn
An interesting challenge, are the accompanying lectures also available?

~~~
swjz
Slides are available at
[http://cs248.stanford.edu/winter20/](http://cs248.stanford.edu/winter20/)

------
danielovichdk
The code doesn't strike me as very well structured nor documenten. Too bad,
because it's an interesting challenge

~~~
fraggle222
It's pretty ridiculous and has a ton of just bizarre stuff you have to read
through (and do!) to even get to something remotely interesting.

One of the first projects I "assigned" to myself when learning to program was
to create a 3d environment and be able to scale, rotate, translate objects in
3d. It was easy and fun because I got to choose the language, the rules, etc.

This assignment makes me cringe a bit because there are a lot of hoops to jump
through. But yeah, I guess, no pain no gain or something like that :)

------
bluedino
This is a good example of a CS project you would do at Stanford and wouldn't
get assigned at your local university.

~~~
adamnemecek
You can easily do this on your own.

~~~
hyperbovine
If "you" are 19 and can do this on your own, then chances are you are a CS
student at Stanford, or a peer institution.

~~~
adamnemecek
I don't understand your point.

~~~
dfee
Can you work us through what you don’t understand?

------
adamnemecek
2d 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.

~~~
joshmarinacci
I assume the point is that you have to implement a pure software rasterizer.
It's not actually that difficult, but it feels like a lot for an undergrad
who's not familiar with the space. I assume this is done as part of a class
that gives you context.

For an example of a rasterizer, you can take a look at my pure JS
implementation of canvas (which is roughly the same imaging model as SVG). All
lines and shapes are flattened into a pure line polygon, then drawn with a
scanline rasterizer. Getting the basics working is fairly easy. Handling the
endless edge cases, however.... :)

[https://github.com/joshmarinacci/node-
pureimage](https://github.com/joshmarinacci/node-pureimage)

~~~
adamnemecek
It's get somewhat tricky when you want things like gpu support, text rendering
etc.

You have to do things like stencil texture to speed things up etc etc.

~~~
Jasper_
GPUs aren't really designed for 2D graphics out of the box. I've written about
this before [0].

Text rendering can be tricky, but not that much trickier -- it's just the same
curves at smaller scales.

Not sure what you mean by stencil textures. Are you talking about the
NV_path_rendering approach where you stencil out the path? Yeah, that's not
really a thing that people do these days.

[0] [https://blog.mecheye.net/2019/05/why-is-2d-graphics-is-
harde...](https://blog.mecheye.net/2019/05/why-is-2d-graphics-is-harder-
than-3d-graphics/)

~~~
adamnemecek
Yeah I'm talking about that. What do people use then?

~~~
Jasper_
Fast, efficient 2D graphics using the PostScript (i.e. SVG) rendering model is
still an open research problem. Most shipping implementations these days do
full tessellation to triangles on CPU.

