Show HN: I built a free SVG Web site

[emson]

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.

[rectang]

I think it's deeply unfortunate that the artists on whose work Midjourney was trained have no say in this website.

https://www.theregister.com/2024/01/04/midjourney_artists_sp...

[emson]

Yes, sorry to fuel the fire a bit. Its hard to know how to handle this now, LLMs have made content cheap, and anyone is going to make it.

[rafram]

- Contact email in the footer is “[e-mail]”, which doesn’t seem right. Unless that’s also you?

- I didn’t read the part about this being AI-based before clicking through to the site, but those descriptions are unmistakable. Ditch the bullet points.

- You can’t make people credit you for AI-generated images. And vector tracing them is not copyrightable creative work either.

[emson]

Yes, https://agentwebfactory.com is my project service that creates directories and websites. Agreed about the content, it is too AI created, and can certainly fuel distain. Mmm point taken about the crediting - my bigger goal with this is to actually build a PNG to SVG tool. Thanks so much for the feedback.

[nalinidash]

in the footer,

> Made with <love> by agent web factory

[crowselect]

This is so transparently copyright laundering. Copyrighted Images go in, “ai created” copyright-free images come out. Ugh.

[emson]

This has been an experiment, and it does appear that people will use the tools more and more. Unfortunately we can't escape it - which I agree doesn't make it right. Perhaps some kind of better licensing? The nature of these tools is that they exist and they have scraped all the "things". Maybe having your own private agent's is the way forward?

[efilife]

Tell me whose rights have been infringed on. Name 1 person

[codetrotter]

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.

[emson]

Thanks so much for the feedback. I used Svelte 5, and I think there is bug that doesn't refresh the page correctly, I'll dig into it. I have to say on the whole Svelte is a really nice framework - before this I'd never built a JS project before (plenty of Python and Ruby). It's interesting how the AI tools can support you in a language and framework you don't know well

[codetrotter]

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.

[okkdev]

Please stop doing AI generated garbage. This is bad on a legal and practical level...

[emson]

Yep, point taken. I wanted to try the easiest thing to completely build a directory only using my own agents, and other AI tools. Ultimately I'd like to build some kind of software based on feedback and traffic.

[greazy]

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

[codetrotter]

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.

[emson]

I looked at a bunch of Vectorising tools, and in the end used https://vectormagic.com/ It works really well, although I had to do all the conversions manually. They do have a bulk tool, but wanted to try this out first. It does also produce .eps as well as .svg

[bryanhogan]

You can use a tool such as Inkscape which has a "Vectorize" function.

[wbakst]

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

[petercooper]

Different platform but you can do that with this: https://replicate.com/recraft-ai/recraft-v3-svg (or on Recraft itself.)

[OsrsNeedsf2P]

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/

[emson]

Thanks! I know it's controversial but it has taught me a lot about building with AI, as well as the legal and copyright parts. I experimented with a number of prompt styles this was an example of one I used on Midjourney:

"Vector line art, icon of a flower, cute and minimalistic, made with bold outline, white background --stylize 400"

[omoikane]

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?

[emson]

Ah I see, my bad will update. Thank you!

[8mobile]

Currently i can see only message Not Found. Are the site up?

[emson]

Apologies I hit my Cloudflare limit and being based in Europe didn't see it until this morning.

[pbronez]

What AI tool did you use to convert the Midjourney raster images to SVGs? That’s a valuable operation and I’ve struggled to find good tools for it.

[emson]

I used this tool. I tried a number of them and this seemed the best: https://vectormagic.com/

[coinstare]

Great looking site and I like your approach to how you put said you put it together. In a similar boat and learning as I go.

[emson]

It's been fascinating experiment. The stuff you can now do, its like having scaffolding to help you. You can create all the tools you need yourself and can host it for virtually nothing. I just upgraded Cloudflare to the $5 plan (btw I have 18 sites hosted atm and that price includes up to 100). I also paid for Fathom analytics $15pm and Cursor, ChatGPT, Midjourney (although cancelled now) and VectorMagic (also cancelled). So you could spend just the domain name and the AI tools, making it about $20. Totally bonkers

[SahAssar]

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

[WillAdams]

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

[rafram]

> I see ratings on images, how do I rate an image?

You don’t. Current SEO trend is to add fake rating metadata to your site because the Google algorithm likes it.

[emson]

I felt I needed to add some kind of license, I also wanted to get attribution back to this website for traffic purposes. Dare I admit that I just asked ChatGPT what to use... I then got it to create a Python script to apply the license to the SVG image itself and add the website details. Its been a fascinating experience

[nashashmi]

The race to find the heaviest svg should yield some interesting results.

[dang]

Please follow the guidelines when posting here: https://news.ycombinator.com/newsguidelines.html, including the Show HN guidelines: https://news.ycombinator.com/showhn.html.