Show HN: I built a free SVG Web site

websvg.com

34 points by emson 8 hours ago

This has been an experiment to see if I could create everything using scripts and AI. If AI couldn't do it I'd get it to create the code such as API calls and so on. This websvg.com site was completely created using these AI tools. Including the DNS being applied, the Cloudflare Pages were automatically set up and the the web site was a Svelte 5 application generated by v0.dev and Cursor. Every image was generated in Midjourney and converted to SVG. I have now taken all of these scripts and can create a similar landing or directory site in less than a minute, provided I have the data. Anyway it's been fun.

codetrotter 4 hours ago

Looks like there's a bug with the "Featured Web SVG" row on the top of the page, with the four featured SVGs.

It's showing the following four thumbnails for me:

1. girl-head-10.jpeg

2. halloween-pumpkin-02.jpeg

3. flower-tattoo-11.jpeg

4. flower-cherry-blossom-02.jpeg

But the corresponding titles and links it is showing for me are:

1. Elegant Black and White Rose Illustration https://websvg.com/all-svgs/flower-rose-01-elegant-black-and...

2. Elegant Floral Heart Silhouette https://websvg.com/all-svgs/flower-designs-12-elegant-floral...

3. Playful Red Popsicle Illustration https://websvg.com/all-svgs/ice-lolly-01-playful-red-popsicl...

4. whimsical halloween house illustration https://websvg.com/all-svgs/halloween-house-04-whimsical-hal...

It seems that what happens is that the four mentioned thumbnails are there initially while the page is loading.

And that once the page finishes loading everything and running some JavaScript, it replaces the featured items.

If I reload the main page, it sometimes updates the thumbnails also but often it keeps the wrong thumbnails shown.

If I click on one of the featured thumbnails, and then navigate back to the main page, then it seems to consistently show the expected thumbnails that belong with the links in the featured row.

But doing a fresh load of the main page either by navigating to it from your HN submission link, or by reloading the page, ends up showing those initial thumbnails instead of the replaced ones most of the time.

  • codetrotter 3 hours ago

    I should also note that this buggy behaviour was observed in Brave browser (Chromium based) on desktop.

    Looking at the site now in mobile Safari on iOS it seems to consistently show the expected thumbnails in the featured row both on first page load and on refresh.

omoikane an hour ago

At the bottom of the page there is an "About Web SVG" section that ends with "and implementing SVG...", is that supposed to expand to more text?

greazy 5 hours ago

How do you convert png to svg? Do the vectors make sense or are they illogical and therefore hard to work with?

  • codetrotter 3 hours ago

    I’m not OP but I did find one website that lets you upload and convert an image to SVG without creating an account or anything.

    Just upload file, choose between “black and white” or “color”.

    https://vectorizer.kiwi/

    I tested it with a bitmap image that ChatGPT 4o created for me based on the following prompt:

    > Owl line art, stylized, scientific, illustration

    I tested converting it to SVG using first “black and white” mode, which was unsatisfactory because it is literally only completely black and completely white shapes, which loses detail compared to the original image that had multiple shades of grey. The file size was around 291 KB which seems to be not too bad.

    I then tried converting the original image with color mode instead, and the result looked good to me. The file size was pretty big, at 3.3 MB. Presumably because it has to use a lot more individual shapes to capture all of the shades in the original image.

    I conjecture that if I fiddle a bit more with the prompt for generating the bitmap in ChatGPT, adding things like “unshaded”, “crisp lines”, etc, you might get a bitmap image that will be better as base for a black and white only SVG conversion that captures the original image well while keeping file size around the hundreds of KB.

    I am on mobile so I have not tried editing the SVG in Inkscape. I assume that with the details in the image I generated, it consists of many small parts and is probably not well suited for manual editing.

    I also know that Adobe Illustrator has a “Live Trace” feature since many years that might also work for this kind of “conversion” to vector graphics. It’s been a few years since last time I tried that feature though.

wbakst 6 hours ago

it would be super cool if there were a way for users to create their own SVGs using your flow -- these look great!

i was just playing around with SVGs yesterday and was wishing there were an easy-to-use tool out there for fiddling around. i couldn't get chatgpt 4.5 to get it quite right and ultimately abandoned it in favor of something premade

  • OsrsNeedsf2P 4 hours ago

    On the contrary, I was able to get GPT to generate the logo for my website[0] in about an hour of trial and error, here's some tips:

    * Give it an SVG to start with, and tell it what you want to make

    * With each successive prompt, tell it to adjust only one thing

    * If it ever goes backwards instead of forwards, edit your previous prompt instead of telling it to correct

    * Test the SVG render outside of ChatGPT's window, since it doesn't show the bounding box or all colors properly

    [0]https://asopenguin.com/

    • wbakst 2 hours ago

      honestly the issue was not that it couldn't produce an SVG

      it's that it wasn't good and i couldn't get it to really match my style

      i feel like the midjourney flow has more potential because of your very first point -- starting with an SVG

SahAssar 5 hours ago

Can I ask why you chose the CC-BY license? I see ratings on images, how do I rate an image?

  • WillAdams 5 hours ago

    How can a license be applied if things made by LLMs are inherently not able to be copyrighted?

    • ranger_danger 4 hours ago

      The latter part of your sentence varies wildly by jurisdiction.

      In the US at least, there have already been rulings considering it "fair use" (which is not a concept in almost any other country AFAIK)... I believe it is seen as basically doing an equivalent thing a human does i.e. drawing influence from other sources it has seen before to create something "new". The only legal difference in my mind is how different it actually is, and how obvious is it, from whatever the original influence(s) were, which also applies to humans.