SVGs (Scalable Vector Graphics)

Graphic Design
, , , ,
1

Scalable Vector Graphics (SVGs) are a way to create graphics using code rather than pixels. They have a lot of arguments in favor of their use! Here’s a quick video on ‘Vector vs Raster Graphics’ for the uninitiated.

When I was just starting out with webrings I came across the MelonLand SVG logo and was instantly enamored with it. I’d eventually create an SVG logo of my very own, but, unfortunately, I kinda “paid for it”. In hindsight, I would have appreciated a stronger foundation regarding SVGs before having resorted to that service.

And so: Here’s a whole thread in their honor!

6 Likes
2

Very cool! This reminded me of a gallery of generative SVG art from Heydon Pickering:

1 Like
3

I have a SVG question!

It seems like if I find someone else’s SVG, but as text (not a file I can download), I should be able to paste that text into an editor - see the image, edit it as an image - and export it back out again.

I wracked my brains for months while making the free books at the Marigold Thrift Shop. The ‘open book’ code is adapted from Erin Sullivan, and I wanted to have her underline but in a red not blue, and ultimately didn’t use it cus I couldn’t figure out how

1 Like
4

So what you have there is an svg image, converted to base 64 and then used as part of a data-url background image. You have the exact same image in red being used for the strikethrough text on that codepen, except the strikethrough style positions the image through the center of the text instead of underneath. So if you copy the background style for the strikethrough text, and then change ‘center’ to ‘bottom’, that should get you this:
20240430_14h58m03s_grim

If you didn’t already have a copy of it in red being used for the strikethrough text though, what you could do then is use a tool like this one Decode Base64 Data to SVG (Scalable Vector Graphics) File (.svg) to convert your SVG data back into plain SVG text format, and then you could edit it like usual, and convert it back to a base64 data url afterwards.

Very cool layout btw! I’m working on something similar for my site

2 Likes
5

oh my gosh, that’s delightfully simple :smiling_face: thank you so much

& the other information is helpful too

1 Like
6

I just went down this rabbit hole recently making this:

https://chaosgoat.neocities.org/assets/svg/orrery.svg

After realizing you could put SVGs in bare HTML or write them manually in notepad.

Looking forward to checking out these tutorials, I’d love to make some generative art and maybe clean up my orrery with some textures on the planets.

4 Likes
7

oh wow - do they actually move at the correct pace? it’s still cool either way

1 Like
8

More or less - everything is scaled to Mercury so the orbit distances and speeds are scale correct.

Sizes of the planets are mostly scale correct except two major things - the Sun to be scale correct would be near the size of Uranus’ orbit and Pluto is roughly twice the size it should be so it’s y’know… visible.

1 Like
9

Thank you for linking to all of this! I have been interested in learning how to use SVGs so this will all be very helpful for me.

1 Like
10

SVG Gobbler is a browser extension that finds the SVG content in your current tab and lets you optimize, download, copy, edit, or export.

HN Discussion

1 Like
11

I actually made interactive SVG animations like this in all its demoscene glory, with a LOT of optimization tools. SVG is cool.

2 Likes