Email or username:

Password:

Forgot your password?
Simon's posts Post Back to profile
Simon Willison

I built a new tool (static HTML+JavaScript, no server-side component) for converting SVG into JPEG or PNG images - almost entirely constructed in Claude 3.5 Sonnet using Artifacts, with a tiny bit of manual cleanup at the end

You can try it out here: tools.simonwillison.net/svg-re

Full details about how I built it on my blog: simonwillison.net/2024/Oct/6/s

Including the full Claude 3.5 Sonnet chat transcript: gist.github.com/simonw/b06fd62

Screenshot of the SVG to JPEG/PNG tool. It starts with a Browse... option for selecting a file, next to a Load example image link, above a textarea full of SVG code. Then a radio box to select between JPEG and PNG, plus a background color color picker widget next to a checkbox labelled transparent. Then Output width, a number field set to 300. Then a convert SVG button. Below is the classic SVG tiger image, with a Download image link that says 47.38BK. Under that is a Base 64 image tag header with a copy image tag button and some visible HTML for a data:image/jpeg image element.
6 October at 20:01 | Open on fedi.simonwillison.net
10 comments
yono mittlefehldt

@simon this is fantastic. I learn so much about what’s possible when people include the chat history they used. Thanks so much for that!

6 October at 20:23 | Open on sigmoid.social
Chris Adams

@simon thanks so much for sharing the whole prompt history. Did you manually create the transcript, or is there another nifty llm truck that stores then locally.

Thank you for sharing the write up and prompts by the way - I had no idea you could make Claude Artefacts from your phone and refine them in a conversation like that.

6 October at 21:04 | Open on mastodon.social
Simon Willison

@mrchrisadams I used this tool to create the transcript (and then manually added the summary/details bits myself because the HTML repeated code was a bit verbose) observablehq.com/@simonw/conve

6 October at 21:05 | Open on fedi.simonwillison.net
Max

@simon That callout about URL.revokeObjectURL() amused me because in scanning the code my PR trained eyes immediately went looking for it after the create Blob. It’s an easy to overlook performance need when working with Blobs in the browser. I’ve found so many huge memory leaks from unpaired createBlob/revokeObjectURL.

One of the reasons I’m hoping the “Disposable” pattern makes into TC-39 Stage 4 soon: github.com/tc39/proposal-expli

6 October at 22:35 | Open on smeap.com
Simon Willison

Here's a related tool that can turn a JPEG or PNG into a vector SVG, using the github.com/jankovicsandras/ima library by András Jankovics

tools.simonwillison.net/image-

Claude transcript for that one is gist.github.com/simonw/d2e724c

7 October at 3:54 | Open on fedi.simonwillison.net
Downes 🍁

@simon Is there any way to do the same with webp?

7 October at 4:07 | Open on mastodon.social
Simon Willison

@Downes for input or output? Either way it looks like the same canvas tricks I'm using to create GIF/JPEG can produce WEBP as well

7 October at 4:31 | Open on fedi.simonwillison.net
Downes 🍁

@simon Input as webp output as anything but webp.

7 October at 12:19 | Open on mastodon.social
Thomas Steiner :chrome:

@simon Nice, just added this tool as an alternative to SVGcode (based on Potrace) that I maintain: github.com/tomayac/SVGcode/blo. For some input, VTracer listed there as well has impressive results, too.

7 October at 6:17 | Open on toot.cafe
chrsstrm

@simon in the past two days I’ve built two WASM based in-browser tools - one with ChatGPT 4o and the other with Claude 3.5. The ChatGPT tool took maybe 2 hours with revisions but the Claude generated tool took 5 minutes and exactly 2 revisions. And the best part is, I don’t speak Rust. Getting sidetracked to build a needed tool is now just a quick pull over into a rest stop instead of the 200 mile detour it used to be. It’s fantastic.

7 October at 21:09 | Open on mastodon.social
Go Up