Can't select text or use keyboard tabbing?
Show HN: A tool to build real websites built exclusively in SVG
51–60 of 164 posts
Re: Show HN: A tool to build real websites built exclusively in SVG
#52I tried the demo site, this could use some work, just about as responsive to platform changes as as an image map. Without some sort of system that allows you to automatically or pseudo-automatically generate mobile versions or versions for different aspect ratios, you'll have people complaining about your site not working on their 5x4 monitor or old phone because a design team wasn't well-equipped enough to cover the…
It's definitely in the long term plans, but honestly in the five years I've been working on this, not one person has ever complained about that type of issue. And, the website looks amazing in fullscreen mode on a big monitor, way better than other sites I've seen (within my design limits).
Being a noxious frontend dev, the first thing I tested was whether you supported responsive. What I found was that you load a different site based on the viewport size (rather than dynamically changing on resize) which I think is a perfectly serviceable approach to this. Cool project!
Re: Show HN: A tool to build real websites built exclusively in SVG
#53I 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 t…
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.
Re: Show HN: A tool to build real websites built exclusively in SVG
#54I 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 t…
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 dis…
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.
Re: Show HN: A tool to build real websites built exclusively in SVG
#55I 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 t…
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 inn…
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.
Re: Show HN: A tool to build real websites built exclusively in SVG
#56Re: Show HN: A tool to build real websites built exclusively in SVG
#57I 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 t…
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.
Re: Show HN: A tool to build real websites built exclusively in SVG
#58Is the tool can create dynamic websites with proper responsiveness to each devices?
Re: Show HN: A tool to build real websites built exclusively in SVG
#59An idea who's time has come? SVG is an awesome concept, a superpower that has been basically demoted to create tiny vector icons.
The story of flash (the adobe / apple clash) is one of those classic tech industry stories where commercial interests randomly divert the flow, stall development for decades etc.
Re: Show HN: A tool to build real websites built exclusively in SVG
#60Is the tool can create dynamic websites with proper responsiveness to each devices?
The page adapts to the screen. It means making different versions for different types of screens.
But, the development process is so abbreviated that it takes way less time to make a mobile & desktop version than it would take to make the equivalent responsive version.
Also many (most?) serious sites already develop separately for different platforms.
So far, in 5 years I've been working on this, I've not had a single comment from a non-developer about the responsiveness being inappropriate.