Drawing in webpages

July 12, 2023 12:03 PM

Clear stylishly monochrome tutorial for SVG How to draw things on webpages instead of sending finished images.

I also liked the interspersed comment sections.

A more 1990s style intro, with colors but also more background context.

posted by clew (19 comments total)

The discomfort this made me feel must be what watching the sausage being made is meant to be like. I illustrate for a living, I can make these lines but it's like looking at the wrong side of the universe seeing the twisted math rituals carried out. There was a section marked practice and I was ready to smoke it, I can draw that house with the pen tool EZ -- then I noticed the dark materials I was being asked to work with here. This I cannot and will never do.
posted by GoblinHoney at 12:11 PM on July 12, 2023 [7 favorites]

GoblinHoney, as a pen tool enthusiast you might enjoy The Bezier Game.
posted by Four String Riot at 12:52 PM on July 12, 2023 [4 favorites]

so the funny thing is that i am not great with drawing.

math though? that i can grok. and so i find doodling in svg with a visual preview in VSCode is how i neaten up some things or create small little icons now and then for side projects.

this, i think, makes us opposites, goblinhoney
posted by i used to be someone else at 1:26 PM on July 12, 2023 [3 favorites]

this is amazing! is there a writeup somewhere (or can someone explain) why you would want to do this instead of, I don't know, drawing a vector image in your favorite vector editor, saving it, and then loading it onto your website?
posted by wym at 2:10 PM on July 12, 2023

wym, I can't speak for everyone, but as someone who does a lot of data visualization and interactive graphics, it's really useful to know this syntax so that you can create (or modify) shapes dynamically instead of having a static design. I worked on some sankey diagrams a little while back, and used the bezier curves to create parallel shapes going from the source and end points of each flow section responsively, regardless of the screen size.
posted by Four String Riot at 2:33 PM on July 12, 2023 [3 favorites]

yeah the "fun" part of SVG is that you can do it programmatically in JavaScript. (Sort of. Using a pretty damn awkward API.) It's nice for making precise or data-driven things.

(it's been a good while since I've messed with it, but last time I tried ~10 years ago, I had to mess around with XML namespaces and write my own helper functions to nest elements etc. Probably there's a good JS library or three out there that obviates the need for this now.)
posted by neckro23 at 2:47 PM on July 12, 2023

yeah the "fun" part of SVG is that you can do it programmatically in JavaScript.

I remember writing Perl scripts to create forms in Postscript, which we could then output on any Postscript-capable laser printer. It was a big thing at the time.
posted by mikelieman at 3:31 PM on July 12, 2023 [2 favorites]

This is pretty cool. I'm familiar with svg only broadly, and this is a great guide that does a wonderful job of visualizing the specifics of what you are manipulating with code. I only bonked through the first few examples but definitely saving as a handy reference.
posted by [insert clever name here] at 3:34 PM on July 12, 2023

so what I’m seeing here is that LOGO is back, for drawing… logos, among other things.
posted by Verg at 3:57 PM on July 12, 2023 [6 favorites]

Turtles all the way down.
posted by clew at 4:39 PM on July 12, 2023 [8 favorites]

I've written some python to generate SVGs for arcane escape room fabrication reasons (they ultimately turned into toolpaths for a CNC machine), and I wish I had seen this when I had to learn it, because this is a better explanation than anything I was able to find 4 years ago.
posted by aubilenon at 4:48 PM on July 12, 2023

Sort of. Using a pretty damn awkward API.

D3.js is awesome! Mike Bostock, it’s creator, leveraged it for the NYTimes most memorable data visualizations.
posted by Stu-Pendous at 5:59 PM on July 12, 2023 [2 favorites]

D3's path generation functions are good. Its selection and data binding functions are miserable. I use bits of D3 for things like map projections or scaling, but mixed into something like Lit or Svelte for the actual SVG bits, and it's notable how much better that experience is.
posted by Four String Riot at 6:08 PM on July 12, 2023 [1 favorite]

Amazing resource. Thanks for sharing
posted by Wandering_Boots at 7:42 PM on July 12, 2023

so what I’m seeing here is that LOGO is back, for drawing… logos, among other things.

The more I read the more I was like ... this is super-Logo. Which, you know, makes sense. And also explains a lot about how vector art works (to me). This is a really great tutorial. Thanks!
posted by uncleozzy at 4:10 AM on July 13, 2023

I recently had to build a web application that spits out a PDF which includes an SVG infographic based on a number of different variables. I had to wing it, knowing jack shit about dynamically creating SVGs (or PDFs). I'll be looking at this more closely. Thanks for this!
posted by brundlefly at 6:48 AM on July 13, 2023

Agreed on the D3 data binding misery, but keep in mind that the library predates Svelte and others by multiple years. D3 came 5 years after jQuery.
posted by Stu-Pendous at 9:33 AM on July 13, 2023

In a future version, the authors will add variables, conditional statements, functions, and finally SVG paths will be Turing complete and be used in browser exploits
posted by destrius at 8:33 PM on July 13, 2023 [1 favorite]

I was drawing using these commands a while back. I don't remember why exactly, it seemed to make sense at the time. Pretty sure I was in quarantine/lockdown at the time, which would explain a lot.

This post would have been super helpful. I read it front to back with great excitement, full of nostalgia.

Other SVG vector files that use other non-path shapes (circles, rectangles and so on) can be converted to SVG paths, which is neat.

Now I remember. Paths seemed like a fun drawing format to use in a machine learning application. The format is clean and simple; with a small interface it's quite easy to train a model to recognize shapes and designs; and to generate imagery. Which, because it's vector, can be scaled up infinitely (unlike pixel based image generators). A small world of opportunity.

Then quarantine ended.
posted by UN at 11:39 PM on July 13, 2023