Hacker News Reader

Comment by AndrewSwift | Hacker News Reader

I was getting really frustrated with CSS and HTML (I was originally a print designer), so built a tool for building websites using only SVG content.

It's essentially a website builder that uses Adobe Illustrator for creating pages.

The results so far have been really promising: - building websites is extremely rapid - very little debugging or verification is needed - it's easy to create beautiful content

Techniques that were trivially easy for me 30 years ago in print are still impossible in HTML. With SVG, I can just design the page without worrying about interlocking invisible boxes.

You can try it yourself — it's free, but you'll need to create an account for the hosting part.

The only tool I could find to create the SVG's was Adobe Illustrator, because it enables linked images and fonts, like regular HTML pages.

As far as I know, no other SVG editor except for Inkscape does this.

For now it's Mac only.

View on HN

For the US market, have you considered accessibility yet? It’s one of the struggles that one has to deal with in a website builder market. As of now, the structure of the website being produced has both SEO (creating search engine and related revenue concerns) and accessibility issues. The later are severe enough to end up in an accessibility lawsuit in the US, if one is running a business worth any non-trivial amount of money (i.e. you wouldn’t want it shutdown upon lawsuit).

Accessibility is obviously super important. For now I add accessibility content manually.

I'm planning to write a script to automatically convert the Illustrator text to HTML, based on font size and position on the page.

The source of the website shows a nice simple accessibility section, with the content rendered in nice vanilla P and Hx and such tags, with the visual rendering a single easily-ignored SVG below. Presuming those two remain synced, it's probably more accessible than most.

SVGs are powerful, and probably underused, especially now that browser support is nearly universal. What do you mean by “enables linked images and fonts”? I create SVGs as text, in Vim, as I do with HTML and CSS.

I revisited SVGs when redesigning a planetarium website (https://friendsoftheplanetarium.org/). I suppose I could have done all of it in CSS, but the code using SVG was simple and concise.

On the way I discovered a nasty bug in recent releases of the Blink engine (https://bugs.chromium.org/p/chromium/issues/detail?id=127442...). It should be fixed in the next release, but it makes me wonder if you are less likely to get correct rendering when using SVGs.

Almost all programs that can create SVG content convert images into inline code, and reduct text to glyphs.

This means that fonts can't be reused throughout the site, that text can't be read (either by screen readers or Google), and it can't be selected or copied.

It also means that images are much larger than necessary and can't be reused (making the site more resource intensive).

All of this adds up to "not being a real web page".

The only exceptions I know of are Illustrator and Inkscape.

So far, the rendering with Illustrator has been pretty much perfect. There were a few idiosyncrasies that I addressed in the server program.

I haven't experimented much with Inkscape because I'm on Mac and it doesn't seem to be used much in commercial contexts.

> The only exceptions I know of are Illustrator and Inkscape.

Aren't those the two most common vector graphics programs?

Illustrator is, but I don't think Inkscape is. I haven't been able to find any real information about Inkscape adoption rates, but I participate in several vector forums and Inkscape only ever comes up in terms of amateur illustration.

I would love to be wrong about this.

Figma and Adobe Xd are pretty popular, as is Affinity Designer. Microsoft Visio is popular in certain contexts, and InVision Studio is also popular.

I own Adobe Creative Suite but use Inkscape for illustrations embedded in web pages because the svg source is cleaner* and diff-able, meaning, the illustrations can be checked into GIT and convey sensible (minimal diff) history of changes. Haven’t checked in a few years to see if Illustrator cleaned up yet.

// Similar to the typical problem with HTML generators, they’d write nasty code, so most were write only rather than write/read. To be fair, I haven’t checked Illustrator output in half a decade, so it could be fine now.

/// Definitely trying your tool, thank you for sharing!

Inkscape and gimp are the only tools I use for image editing. I'm a developer working in B2B manufacturing so the aesthetics of my work don't really matter.

Just an anecdatum, at UIUC's fab lab we taught Inkscape to all ages, it was really useful to import an image, trace bitmap to an SVG, and send the SVG to vinyl cutters, laser cutters, 3d printers... I think we were not the only fablab to do this, and hopefully it is popular in other educational circles.

One of the issues you run into with SVG is performance, particularly if you need any kind of styling of the SVG. As the tool scales you have to put in some effort into optimizing the generated SVG to help.

If you aren't handrolling or compiling the SVG yourself you also need to look out for whatever your tool is doing. Illustrator and Sketch in particular do some wonky nonsense with filters to support things like inner/drop shadows, and you may want to A/B the SVG in different browsers to make sure they look the same. It's been a few years since I had to do this, but in my experience you really had to restrict what features of the SVG editor your designers used.

There's one real bug where Illustrator doesn't handle opacity masks correctly, but otherwise it's been really reliable about displaying correctly.

However, in the past 10 years or so, a bunch of Photoshop functionality has been added in to Illustrator, and none of it is compatible with SVG.

So, there are various and warnings and workarounds for drop shadows etc.

But, Illustrator has good support for SVG effects, so drop shadows in particular are pretty simple to use.

The long term goal is to create really clean SVG/HTML hybrid code with a new program, but I still have to write it!

---

There's also an issue where SVG's are slower to animate because they don't use hardware acceleration, but my understanding is that this is coming soon.

The discrepancies I'm talking about is not between Illustrator and your browser, but between different browsers/renderers. Filters in particular are problematic.

You have to be careful about what you mean by "SVG effects" since the spec is quite large and has many ways of doing things, and different software may not agree with how they work. I don't think any renderer passes the entire standard test suite.

> wonky nonsense with filters to support things like inner/drop shadows

How else would you implement that with SVG? And in my experience filters have been very well supported for the past years. They are part of the SVG conformance tests anyway, so any mismatch is also a broken SVG implementation.

Does this mean it could work with Inkscape? Since all Adobe products are now rentware I've moved to Inkscape and Affinity Designer for SVG these days.

It could work with Inkscape. I'm trying to get some funding to hire a couple of devs, and PC support and Inkscape support are very high on the list of priorities.

I have had a lot of difficulty finding out how widely Inkscape is actually used. I look in the user forums etc., but apart from hobbyists, I don't hear about people using it for business.

If you have any info, links etc., I'd greatly appreciate it.

Every time you add a tool that can be used to edit SVG, you add addressable market to your product. It's not about Inkscape, it's about SVG. Letting people use the editor of their choice just makes the product more useful. Also, inkscape is free, so you don't have $600/year in subscription fees to someone else as a barrier to adoption.

I don't unfortunately. I used to use Illustrator at work but these days I only create SVG for personal projects. I have recommended Inkscape to college students learning design to avoid the cost of AI, but that's about it.

I have used Inkscape extensively in several professional projects - in fact I designed an entire custom icon set consisting of hundreds of SVG images. The Inkscape executable even supports command line arguments that invoke various functions so it can be used for batch processing and in scripts (I wrote a Perl script to automate several tasks involving my icon set).

So yes it can absolutely be used for business!

If you would take one suggestion, it's probably a good idea to make saving and pushing different actions. A complex project might go through several revisions before it's ready to be uploaded, might need approvals, might need a lot of things. You wouldn't want to leave your work unsaved until you're ready to put it online.

There's no obligation to push — you can easily synchronize the site when everything's ready.

Also, any modifications take effect after 24 hours, or you can just unpublish a page temporarily — there are several options that permit working without going live.

Congratulations for launching a new idea! There are plenty of kinks to be ironed out but it looks promising.

A couple of problems on my end (Firefox on Android, low-end device): selecting text is very wonky, noticeable stutter when scrolling, first load of the page had really small text (on a refresh it showed me a proper mobile version).

If I may ask, what's the biggest motivation? The easy of use of authoring through Illustrator or having a more distinct graphic design? (the curves, funny text wrapping, et cetera)

Edit: also an issue in Firefox on Windows 10: page width is larger than the visible screen.

What about SEO, a11y, i18n?

For internationalization, it's built to handle different languages already.

There is a setting for each page for Google and Accessibility where one can include HTML text for those reasons.

It's a priority for me to write a script to create an accessible/searchable version automatically.

Long-term, the goal is to create a design program that creates hybrid SVG/HTML pages that are indexable and screen-readable by default.

Need funding.

Okay sounds nice

good luck with the funding!

What about p27s?

("People who hate abbreviationS")

Chrome tried to auto-translate their example page which is in French, and failed completely.

For what it's worth, Xara (xara.com) offers SVG output. I wonder if it could work with your setup?

They also have their own integrated web site builder as well.

I'm definitely going to check it out — someone else also mentioned it.

> Techniques that were trivially easy for me 30 years ago in print are still impossible in HTML.

Out of curiosity, what techniques are impossible in HTML? I ask this because I too am working on a website builder, and wonder what might be too complicated or impossible for people to implement.

Any kind of freeform curve, rotation, or continuous form across the entire page is extremely difficult, as is content that is staggered, diagonal or overlapped is difficult.

For example, https://svija.love/en/imagine would be almost impossible in HTML.

The main thing that makes HTML difficult is that everything is interlocking — you can't just drag the H1 headline down 20px and over 100px, because there's already something there, or there's nothing to hold the H1 in place.

I would love to know more about your project if you'd like to share. After today, I recommend posting to HN.

Hmm I have seen many pages that look a lot like that page does (on mobile at least). I don't see anything that is impossible - I'd be fairly confident that I could do a pixel-perfect replica in HTML and CSS without too much fuss.

FWIW CSS is quite powerful these days - rotations, translations, overlapping etc are all trivial. You can absolutely position elements down to the pixel if you want.

People tend not to do these things any more though as they make for an annoying and potentially illegal website (accessibility laws), plus maintaing it is a pain in the arse as you lose all the reflow benefits of HTML that is screen size and shape agnostic

For starters:

1. Fitting text to curves.

2. Wrapping text to curves.

This looks nice!

What do the end results look like when used on devices with different screen sizes and resolutions?

You can visit the site and resize your browser to get an idea. It just scales it down.

I can't be the only one that drags the browser to the side of the screen in order to put it in tablet, and then phone view, and then judges the results!

Will a site laid out for a desktop browser even be readable on a phone?

Does a site laid out for a phone like gigantic on a desktop?

How does it react to different aspect ratios?

Try Ctrl-Shift-M in Firefox.

cmd-option-M on Mac, and if you reload the page it looks really nice ;-)

Absolutely ingenious. I love what you've done here

I agree, this could fix a massive amount of headaches depending on what kind of site you're building.

If it's proven to be performant enough, I think it would work for 90% of sites out there (pages of information + pictures)

Theoretically you could even have a graphic designer build a site without much code knowledge instead of hiring a webdev.

Neat idea; I'm working on a project in a similar space but taking a very different approach. One question - why AI and not Figma?

Figma doesn't export to SVG with linked images and fonts, so it can't be used to create a web page.

That was pretty much the first thing I thought of when I started the project.

There is a typo at the top -- "Ilustrator" in "A WEBSITE BUILDER BASED ON ADOBE ILUSTRATOR".

Thank you (you'll have to imagine it in all caps).

Wow! this is amazing! How is responsiveness of the sites impacted by this?

It's very responsive, like literally shrinking the contents to fit the width. Like when iPhone was first introduced and you open websites using its browser.

That’s the exact opposite of responsive, as originally coined and commonly used. Even when just responding to screen size, reflowing content so it’s legible and usable on the device is a reasonable low bar.

Can I use Affinity Designer with your tool?

Affinity Designer would be great, and we would LOVE to use it.

But, the last time I checked, it can only create SVG content with images converted into inline code, and text reduced to glyphs.

This means that fonts can't be reused throughout the site, that text can't be read (either by screen readers or Google), and it can't be selected or copied.

All of this adds up to "not being a real web page".

If I'm wrong about any of this, of if Affinity Designer has been updated to enable linked fonts and images, that would make my day.

I love Illustrator but it's certainly a bit of an albatross around my neck ;-)

Reply on news.ycombinator.com