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!
SVG Tutorial + [HN Discussion]: Learn from the fundamentals up to advanced concepts like animation and interactivity.
SVG Viewer + [HN Discussion]: A convenient site for viewing and editing SVGs directly in your browser.
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
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:
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 https://base64.online/decoders/decode-base64-to-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
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.
thank u for linking all of the resources! svg is something I want to eventually get around to doing, it seems like a pretty powerful tool for making cool designs
Are there any SMIL-animation-in-SVG tutorials you all recommend? SMIL animation is my favourite type of SVG animation, but I notice it isn’t discussed in the linked tutorial, or the other SVG resources in the community wiki.
I could search for any old SMIL-in-SVG tutorial and put it in the resources list, but I don’t know if the tutorials I find are good for beginners. (Are they too in-depth? Not in-depth enough? Hard for me to tell when I already know it all.)
I’ve only ever really done SVGs for “commissioned” design work but do find it quite fun. The Lamia page technically is using a rough svg for the Lamia-shaped textbox, too. I just wish i knew how to like, make it an actual text box, but for the art of it what I made there is pretty neat. I’d love to do more vector work for non-commissions but rarely have much need for that kind of scalability (and i love pixel art too much)
thank you so much
