[HN Gopher] Show HN: A tool to build real websites built exclusi...
___________________________________________________________________
Show HN: A tool to build real websites built exclusively in SVG
Author : AndrewSwift
Score : 138 points
Date : 2021-12-03 14:28 UTC (8 hours ago)
(HTM) web link (svija.love)
(TXT) w3m dump (svija.love)
| wongarsu wrote:
| This is how you enable creative web design. Sure, you shouldn't
| necessarily run your business on something like this (for a
| multitude of reasons), but for personal websites and prototypes
| this is great.
|
| When Flash plugins were on the way out everyone always repeated
| how this would open the door for equally powerful HTML5 tooling.
| But while HTML5 has gained all the technical capabilities of
| Flash, nobody has managed to make an authoring tool as good as
| Adobe Flash. With the loss of Flash we mostly lost the creative
| websites by people who can't code but are great at visual design.
| This comes close to enabling that again.
| cryptoz wrote:
| Macromedia Flash era was the best for authoring IMO. But I was
| just a hobbyist, didn't use it professionally.
| AndrewSwift wrote:
| I loved Flash, and I think that SVG, if I can create proper
| tools, has the potential to be as good and maybe to avoid
| some of the drawbacks.
|
| In fact, I wrote Svija because I took a sabbatical from web
| design. When I came back, Flash was gone and I just couldn't
| stomach the idea of twenty years of HTML and CSS. So, SVG.
| cunthorpe wrote:
| The problem with SVG is that it performs terribly
| especially when compared with Flash. This site is
| relatively small and it's super slow on an i9
| spicybright wrote:
| I wonder why that's the case. Flash was all vectors and
| could run really well once it reached maturity.
|
| Is it because we're shoving the SVG into the dom or
| something? Or using expensive SVG features?
| ehutch79 wrote:
| This was a terrible era. Specifically because of sites that
| had no business using it making their whole site flash. Like
| restaurants.
| AndrewSwift wrote:
| There were definitely a lot of bad Flash sites, but there
| were some amazingly creative, artistic sites too.
|
| I could list a bunch of links, but of course none of them
| work anymore.
|
| Perhaps I could require some sort of SVG Licence to use
| Svija, or an oath to usability ;-)
| spicybright wrote:
| It's not like they were completely unusable, it's just
| showing text in an annoying way.
|
| On the plus side, it's a testament to how nearly anyone
| could build a website. I'm sure many many people got their
| feet wet in web dev making simple sites for local
| businesses because the bar was so low.
| ehutch79 wrote:
| Except when they were completely unusable.
|
| Making an html version of most of the stuff i'm talking
| about would have been much easier than the flash version.
| when the only interactivity is changing pages.
| thomasikzelf wrote:
| I really like that this allows people to finally break free from
| the box design and try something new. Of course there will be
| challenges like accessibility along the way but those can be
| solved.
|
| I just happened to launch a similar product today on product hunt
| (https://moos.app) that also allows people to build pages from
| SVG files but I take a more hybrid approach and focus more on
| animation (and the render actually uses WEBGL for performance
| reasons).
|
| Will we still have the same boxy design in 5 years or will we
| have a completely new experience?
| AndrewSwift wrote:
| Thanks! I'll have a look at your app. It sounds promising.
|
| I really hope we get out of the boxy design in 5 years, and I
| hope it'll be thanks to Svija and Moos!
| derekzhouzhen wrote:
| Interesting idea. But no responsive design?
| AndrewSwift wrote:
| Have you tried it on different screens?
| WorldPeas wrote:
| I 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 multitudes of different
| screen sizes and ratios.
| AndrewSwift wrote:
| 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).
| pfraze wrote:
| 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!
| AndrewSwift wrote:
| Thanks!
|
| It's so fast to build pages that building separate versions
| is much faster than building a single responsive WP page
| (for example).
|
| Most of the time, both versions (or more if needed) are in
| a single Illustator doc and it's quite simple to maintain
| both at once.
| fotad wrote:
| Is there any UI framework build on SVG?
| dreamcompiler wrote:
| I wish. SVG (with JS) is a fantastic way to build much more
| flexible UIs than HTML is capable of.
|
| D3 can do it but it's really geared toward data visualization
| rather than general UIs.
|
| https://d3js.org/
| acallaghan wrote:
| I really hope not
| AndrewSwift wrote:
| There's not right now but I'm hoping to create one.
|
| One of the nice things about this project is that it's shown me
| to what extent the internet has become based on existing
| content.
|
| HTML is such a pain in the ass for design that almost all
| projects are just recycled -- variations on themes, existing
| controls etc.
|
| SVG is much more open, and of course that might be abused, like
| Flash.
|
| To be clear, I do understand that usability is key and that
| websites should function in a transparent and understandable
| manner.
|
| Personally my principle is that the visitor should be empowered
| at all times.
| roosgit wrote:
| I was getting really frustrated with Xcode (I was originally a
| front-end developer) so built a tool for building apps using only
| JavaScript, HTML, and CSS. It's called Electron.
|
| Joking aside, if enough work is put into it, SVG might be a
| solution one day to build a website. But right now it causes more
| problems than it solves.
| bronlund wrote:
| This may sound neat, but is the most stupid idea I've seen in a
| long time. As if Node.js wasn't bad enough.
|
| Not only does this break standards we have used decades getting
| in place, but anyone old enough to remember the last time WYSIWYG
| webpage editors was all the rage, know how that ended (e.g.
| https://www.arngren.net/)
| kaetemi wrote:
| I like this idea. Using SVG on websites is quite fun to break the
| rigidness.
|
| Text selection seems very wonky, sadly.
| pedalpete wrote:
| It's because some of the text is rendered from a text tag
| within svg, and some of the text is drawn.
| abstract_put wrote:
| First of all, neat concept. Small point, on desktop I have a
| horizontal scroll bar for what appears to be intended as a full
| width site, which is always a bit of a pet peeve.
|
| I understand it's a technology demonstration, I'm struggling to
| decouple the clash with my aesthetic sense from the
| technology/framework. There are so many new UI elements (stuff
| floating, expanding, appearing on hover) that it really puts me
| off. E.g. on the navigation group that floats on the right, I
| guess theoretically it's cool that if you hover over "imagine" it
| offers a small "expand" button and then there's a neat animation
| as it drops down. All that feels out of place on a website
| though, as far as I'm used to them.
|
| Can you expand on who you've found resonates with the tool? Is it
| mostly people who want a print poster on the internet, or similar
| image-first, single-page users?
| AndrewSwift wrote:
| So far it's been mainly small businesses who just want to put
| up a cheap website quickly.
|
| I can turn a PDF flyer into a website in a couple of hours, and
| that's been really popular.
|
| It's so fast to put up a site that it would be good for events,
| like album release parties, etc.
|
| I'm hoping to find a company that would really like to explore
| the potential -- with a good team we could do some amazing
| stuff.
|
| The long term goal is to make a tool to replace Illustrator and
| just build regular websites using hybrid SVG/HTML pages (SVG as
| much as possible, HTML for text/search/accessibility reasons).
| abstract_put wrote:
| Very neat - I love the idea of building tooling for a very
| specific workflow. Must be satisfying to show people and have
| them go "what? That's it?!"
|
| > The long term goal is to make a tool to replace Illustrator
|
| As in your ambition is to have the original content creation
| happen in the tool you make, take Illustrator out of the
| process entirely? That's ambitious! (or it seems like it,
| with little actual knowledge of what functionality people use
| within Illustrator to produce content like this).
| smpetrey wrote:
| This ain't it. Hard pass. May as well just be a hosted PDF.
| BasilPH wrote:
| The page looks cool, but I left immediately once the music
| started playing. There's a reason most websites stopped doing
| this.
| willio58 wrote:
| Yeah auto-music is bad. Sound effects are hard to do too,
| although when done well they can work (at least for me).
| Example of a site with sound effects that isn't overwhelming:
| https://www.joshwcomeau.com/
| BasilPH wrote:
| Thanks for sharing. I only got a sound effect when turning
| the sound off, but didn't find any others?
| AndrewSwift wrote:
| Fixed, thanks for mentioning that. I was experimenting with
| Youtube embeds and since the autoplaying didn't work on my
| browser, I forgot to take it out.
| FpUser wrote:
| Websites that play sound upon loading cause me to quit
| immediately.
| AndrewSwift wrote:
| Fixed. That was a mistake -- I had been experimenting with YT
| embeds, and I accidentally left the autoplay in (it was broken
| in my own browser so I didn't notice).
| ReleaseCandidat wrote:
| "Those who cannot remember the past are condemned to repeat it,"
|
| George Santayana
| gtsop wrote:
| What is the past you are refering to? Please give context
| CodeGlitch wrote:
| Perhaps parent was referring to flash sites from 20 years
| ago? Personally I found them to be pretty unique and
| creative. Obviously there were problems with security and
| cross platform limitations, but awesome none the less.
| lucideer wrote:
| > _Virtually all website builders include options to create
| responsive websites. However, in most cases, developers have used
| these options to create two versions: a desktop version and a
| mobile version. Various elements may also appear or be displaced
| depending on the exact screen dimensions._
|
| > _Svija is intended for websites where the content creator
| wishes to have complete control over the final page. Therefore, a
| separate, fixed version of each page is created for each version
| of the website. In most cases this means a desktop version and a
| mobile version._
|
| > _Although it may seem like a sacrifice to create separate
| versions for different platforms, [...]_
|
| This is mostly* all well and good, but should really be a front-
| and-centre caveat on the homepage for people considering this
| approach (I took this quote from https://svija.love/en/wtf ).
|
| ---
|
| *However:
|
| > _[...] the reality is that most companies who care about
| providing a strong mobile experience already construct separate
| mobile websites_
|
| This is absolutely not even in the slightest bit true. It's true
| that most _large_ companies (e.g. FAANG, etc.) do this, but
| saying "most companies" here is outrageous.
| cunthorpe wrote:
| To me it sounds like the author has nearly-zero experience in
| web development and thus prefers publishing websites straight
| out of Illustrator.
| AndrewSwift wrote:
| I have been building websites professionally since 1995,
| including ASP, Cold Fusion, PHP, Perl, lots of other stuff.
|
| But, it's true that I don't have much recent experience
| outside of Wordpress, and I have not had the benefit of
| working in large teams to learn best practices.
| dsizzle wrote:
| Yeah, all the sites I work on are responsive.
|
| I wonder if there's some way to make this approach responsive,
| even if just using breakpoints (vs serving a completely
| different site requiring a pageload). Doesn't seem like it, but
| I haven't thought about it much.
| AndrewSwift wrote:
| That is definitely the goal long-term, but I don't think it
| will be possible with Illustrator.
|
| Right now this project is a proof of concept: see, by doing
| real design we can make nice sites, very quickly.
|
| I'm trying to get funding to create a new set of tools based
| around this kind of workflow.
|
| Re-introducing breakpoints and some level of content
| reflowing is certainly going to be a part of it (I believe I
| mentioned it in the WTF page somewhere).
| AndrewSwift wrote:
| I will change the text.
|
| I have built many many HTML sites, but not many in a team
| context, so it's true that I lack relevant experience.
|
| In my own experience, what ends up happening is that there are
| lots of situations where there's double content -- on desktop
| show this block, on mobile show this other block.
|
| But that's not the same as a whole duplicate website.
| mro_name wrote:
| Nice!
|
| If you add a dark background inline style to the html root
| element, you get rid of the white background lurking from behind
| when pulling down. The white is blinding.
| AndrewSwift wrote:
| Thanks, I've added it to our list of upgrades!
| XCSme wrote:
| The website doesn't work for me, the page is white (Brave
| Browser).
|
| EDIT: It works if I disable the shield/ad-blocker.
| TruthWillHurt wrote:
| I got a similar system where I display an image full screen, with
| clickable locations based on mouse position.
|
| Like Svija - not a real website.
| AndrewSwift wrote:
| Got a link?
| AndrewSwift wrote:
| 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.
| rancar2 wrote:
| 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).
| jccooper wrote:
| 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.
| AndrewSwift wrote:
| 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.
| leephillips wrote:
| 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/detai
| l?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.
| AndrewSwift wrote:
| 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.
| pgcj_poster wrote:
| > The only exceptions I know of are Illustrator and
| Inkscape.
|
| Aren't those the two most common vector graphics programs?
| AndrewSwift wrote:
| 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.
| xupybd wrote:
| 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.
| jazzyjackson wrote:
| 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.
| oofoe wrote:
| 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.
| andrecarini wrote:
| 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.
| thesuitonym wrote:
| 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.
| AndrewSwift wrote:
| 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.
| dreamcompiler wrote:
| 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.
| AndrewSwift wrote:
| 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.
| indymike wrote:
| 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.
| dreamcompiler wrote:
| 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.
| duped wrote:
| 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.
| AndrewSwift wrote:
| 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.
| duped wrote:
| 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.
| lampe3 wrote:
| What about SEO, a11y, i18n?
| AndrewSwift wrote:
| 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.
| lampe3 wrote:
| Okay sounds nice
|
| good luck with the funding!
| VikingCoder wrote:
| What about p27s?
|
| ("People who hate abbreviationS")
| kingcharles wrote:
| Chrome tried to auto-translate their example page which is in
| French, and failed completely.
| katsura wrote:
| > 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.
| AndrewSwift wrote:
| 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.
| mattlondon wrote:
| 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
| indymike wrote:
| For starters:
|
| 1. Fitting text to curves.
|
| 2. Wrapping text to curves.
| danrocks wrote:
| This looks nice!
|
| What do the end results look like when used on devices with
| different screen sizes and resolutions?
| david927 wrote:
| You can visit the site and resize your browser to get an
| idea. It just scales it down.
| tata71 wrote:
| 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!
| ehutch79 wrote:
| 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?
| goohle wrote:
| Try Ctrl-Shift-M in Firefox.
| AndrewSwift wrote:
| cmd-option-M on Mac, and if you reload the page it looks
| really nice ;-)
| electroly wrote:
| There is a typo at the top -- "Ilustrator" in "A WEBSITE
| BUILDER BASED ON ADOBE ILUSTRATOR".
| AndrewSwift wrote:
| Thank you (you'll have to imagine it in all caps).
| lbj wrote:
| Absolutely ingenious. I love what you've done here
| spicybright wrote:
| 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.
| pkphilip wrote:
| Wow! this is amazing! How is responsiveness of the sites
| impacted by this?
| wiradikusuma wrote:
| 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.
| eyelidlessness wrote:
| 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.
| danielvaughn wrote:
| 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?
| AndrewSwift wrote:
| 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.
| prox wrote:
| Can I use Affinity Designer with your tool?
| AndrewSwift wrote:
| 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 ;-)
| ASpaceCowboi wrote:
| I really really really really really really really really LOVE
| THIS.
|
| 1 feature I love to see, if possible, is to implement either
| youtube videos or Gifs.
|
| (Would be cool if there was a really basic keyframe animation
| tool bar, but thats a lot of work) So don't listen to me.
|
| But overall i love this. Thank you for making this!
| gbromios wrote:
| Fuck yeah, I love svgs. I'm not a designer so this isn't really
| for me, but the potential here is huge. Nice work.
| tinaprice wrote:
| Is the tool can create dynamic websites with proper
| responsiveness to each devices?
| AndrewSwift wrote:
| 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.
| cunthorpe wrote:
| Kids can't explain their emotions. Non-developers can't tell
| what's wrong with websites.
|
| Just because they don't complain about something
| specifically, it doesn't mean that they don't feel
| discomfort.
| erinaceousjones wrote:
| Can I chime in as a regular user, even though I'm a
| developer?
|
| I looked at the website on my big 1440p monitor. It looked
| cool.
|
| I resized the window to a still reasonable size (1280-ish
| width). Now some of the text is waay too small for me to
| read. 1366x768 is a still pretty common laptop resolution..!
|
| I can't zoom in the text like on a regular page, it just
| makes the whole thing bigger, like an image.
|
| I also can't use my favourite a11y tool waspline reader [1]
| because the HTML is hidden :-( but... I'm not a blind person
| who uses a screen reader. I'm an ADHD'er with visual snow. I
| can't change the fonts to ones which are a little more
| readable for me - and the font rendering in SVG images on
| Firefox on my linux computer isn't the best.
|
| [1] https://addons.mozilla.org/en-GB/firefox/addon/waspline-
| read... ^ tbh, considering a lot of stuff I read is in PDF
| form I am thinking about doing an equivalent of this that
| does OCR on the viewport and applies a shader so it works on
| anything, and it only really applies to long blocks of text,
| which aren't a feature of the kinds of things you're
| targeting (flyers, product landing pages etc) but I wanted to
| highlight some of the less obvious accessibility stuff that's
| around.
|
| I get it, pretty much everything posted to HN gets the "I
| don't like the design of this site for technical reasons"
| treatment (especially when it's an article on someone's blog
| and nobody was asking lol), but I do wanna highlight the not-
| so-obvious accessibility stuff.
|
| Lots of folk will get by without complaining, because they're
| kinda used to tech and design being a bit difficult, and they
| aren't aware how we can improve things for them! I've seen my
| mum pull out a magnifying glass to read stuff on tablets
| before - she finds it easier than trying to get pinch-to-zoom
| to work - "I hate the panning from left to right all the
| time. It's not like reading a book. I'll forget what the
| start of the bloody sentence was!". Some people will
| attribute it to just "not being good with technology", which
| makes me sad for the users.
|
| SVG is great but that "20 years of HTML and CSS" shouldn't be
| dismissed because it makes designs take longer.
|
| I think it's really exciting that we have such a powerful
| layout engine in web browsers these days; the best BEST site
| designs I've seen take the best of vector art and responsive
| design. It is SO satisfying having a good vector landing page
| where the text still reflows, different things are visible
| when you resize the window etc.
|
| I think your tool is great though, I just think you should
| run with all the "what about responsive design?" HN comments
| - you could have a really, really _really_ good tool if you
| can support breakpoints, fluid layouts and reflowable text
| sections. The kind that people would pay $$$ for...
|
| Plus, it's gotten a lot better since flex layouts became a
| thing in CSS!
|
| I think Illustrator etc are missing a trick here too because
| they're designed more for print media, right?? What would be
| awesome is if there was a similar editor + format where
| responsiveness and fluidity were baked right into the
| authoring flow, like at the layer / object-group level, so
| you could say "those layers have to be pixel perfect, this
| one will show up at these sizes, this other one will stretch
| this amount, that one will scale relatively compared to that
| one" and hopefully end up with designs that you, the
| designer, are always satisfied with, which require little or
| no further work to adapt to other screen sizes, DPIs,
| devices, etc....
| AndrewSwift wrote:
| I really appreciate your comment, and I just want to
| reassure you that we take accessibility seriously.
|
| In this case, we had to start somewhere, and we're excited
| to show it off. But it obviously needs work to be really
| accessible.
|
| Svija might never be appropriate for content-oriented
| websites, which may be most of them. It was quite difficult
| to create the WTF page in Illustrator -- it's not made for
| that kind of thing.
|
| I am absolutely planning to build a tool, where, as you say
| "editor + format where responsiveness and fluidity were
| baked right into the authoring flow, like at the layer /
| object-group level".
|
| As soon as we can get some funding it's off to the races!
|
| Thanks again, you added an important point of view to the
| comments.
| derekzhouzhen wrote:
| There is more than mobile and desktop; there are tablets that
| is somewhere in between. Hell, the mobile users can rotate
| their phone.
|
| Those being said, it could be a viable solution for fixed
| screen kiosks.
| streamofdigits wrote:
| An 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.
| geenat wrote:
| The workflow idea behind this is super innovative-- From your SVG
| program directly to the web.
|
| Of course some bugs to work out, but for a new idea, damn.
| AndrewSwift wrote:
| Thank you so much. Lots of bugs to work out, and mainly I need
| to make it much simpler.
| wila wrote:
| Cool idea, but the svg blob's (to give it a name) should be
| loaded externally like an image so that the html stays readable.
|
| Like others said, the site scales, but isn't responsive and thus
| becomes unusable once you resize a browser window to a smaller
| size.
| robertoandred wrote:
| Can't select text or use keyboard tabbing?
| AndrewSwift wrote:
| You can select text unless there's a link over it -- you might
| have tried in a section that is a link to somewhere.
|
| What do you do with keyboard tabbing? Do you mean form fields?
| For that it works fine, unless I just made an HTML mistake.
| david927 wrote:
| I would love an SVG editor browser plug-in that also contains
| authentication. When you are on a page you're authorized to edit,
| a browser button shows that you can modify the page.
|
| It then works with a protocol, with implementation examples in
| different languages, to create/remove/hot update SVG files on any
| subscribed servers. The authentication can further allow viewing
| of content on those servers as well.
|
| Any small Linode server could be your own private Google Drive
| for web-enabled Word and PowerPoint documents.
| jatone wrote:
| netlify jamspell almost has this it a builtin CMS js that talks
| directly to git hosts.
| cunthorpe wrote:
| Your site is laggy, zero accessibility, microscopic text unless
| your window is large enough, does not support anything you'd
| expect from a regular website. Just ship a PDF already.
|
| The web is not paper, don't design for it as if it as.
|
| Oh, and this little page weighs 4.5MB
| gorgoiler wrote:
| This site has very clear guidance on expected standards of
| behaviour when interacting with a _Show HN_ post.
|
| You may not know about them. Read them here:
|
| https://news.ycombinator.com/showhn.html
| sofard wrote:
| So much hate. Whether or not it has legs, it's an interesting
| proof of concept. Reminds me of the early days of internet
| where people weren't afraid to explore crazy ideas.
| kfootball15 wrote:
| Your approach is incredibly out of line. This is a proof of
| concept designed by one person. It's an idea, and an
| interesting one. Why do you feel the need to be so negative?
| cunthorpe wrote:
| > This is a proof of concept
|
| If it was a proof of concept, fine, but it's not, the author
| intends to develop this further and is accepting signups. I
| do not want this web. Just publish PDFs if you want to design
| fixed media.
| spicybright wrote:
| It's a proof of concept, but I think it has potential so it's
| worth exploring.
|
| > The web is not paper, don't design for it as if it as.
|
| People have said that for literally everything we have on the
| web now, starting with "the web is only for text and
| hyperlinks"
| cunthorpe wrote:
| > it's worth exploring
|
| Hard disagree.
|
| > People have said that for literally everything we have on
| the web now
|
| What I meant is that here the intent is to design something
| once and display it in the browser as if it was an image (or
| printed media), i.e. without filling the window properly.
|
| This is 100% like displaying a PDF in a browser and it does
| not belong in one.
| spicybright wrote:
| > Hard disagree.
|
| Well, then I'm thankful people can still develop and test
| out radical ideas despite others not wanting that.
|
| This is how all good tech develops, like PDFs. It just
| tends to be through the internet now.
| Xevi wrote:
| Cool idea, here's some feedback.
|
| It looks nice on my phone (although it's really slow to load, and
| laggy when scrolling). However, on my 1440p 32" monitor it's
| really bad. First of all everything is HUGE, and it seems like it
| just scales up/down with the size of my browser window. The
| content is not reorganized as I change the size of my browser
| window. If I scale my browser window up and down, everything just
| get larger or smaller, to the point where it's unreadable. Also,
| for some reason the page is just blank until I open DevTools, and
| if I "snap" the browser window in Windows 10, the page content
| doesn't scale to the right size.
| kingcharles wrote:
| "Your scientists were so preoccupied with whether they could,
| they didn't stop to think if they should." -- Dr. Ian Malcolm
|
| https://www.youtube.com/watch?v=4PLvdmifDSk
| ibdf wrote:
| Really neat idea, but comparing this to wordpress seems
| completely wrong.
| AndrewSwift wrote:
| I take your point.
|
| I've been having a lot of difficulty with messaging -- the
| basic benefits are that it's super fast, and you can do stuff
| graphically that's just impossible otherwise -- but I haven't
| found a good way to communicate that.
|
| I won't put it in the next version of the site.
| pedalpete wrote:
| I'll admit, I didn't want to like this at first. Building entire
| websites out of SVG sounds like a nightmare. But I checked it
| out. On first load I got a blank page. Waited and waited, looked
| at the devTools,and just had nothing. I refreshed the page and it
| loaded properly. Ok, I get it, this is not ready for prime-time,
| so let's see what we've got.
|
| So, now I'm looking at this and thinking....what new amazing
| capability has this provided that we couldn't do before. I was
| expecting amazing 3D svg animations or something. But this is
| just a very average template style website. Why would I want this
| to be made as an SVG. The "illustrator to website" doesn't appeal
| to me personally, and I'm not sure I know why this would be
| valuable.
| quickthrower2 wrote:
| I think it's the other way around. If someone is a designer and
| use illustrator, why would they learn HTML and CSS when they
| can use this?
|
| Maybe there are a lot of use case where this is good enough and
| perhaps better.
| robertlagrant wrote:
| Axe accessibility report on that website:
|
| TOTAL ISSUES 220 AUTOMATIC ISSUES 220 NEEDS REVIEW 160 GUIDED
| ISSUES 0 Critical 1 Serious 55 Moderate 2 Minor 2
| AndrewSwift wrote:
| If you read the page called WTF, I talk a lot about
| accessibility. I totally appreciate the importance of it.
|
| But, the fact that I don't a perfect solution right off the bat
| is not a reason to stop exploring!
|
| Also: ALL CAPS.
| flooq wrote:
| It's certainly a reason not to use it in production though.
| Gys wrote:
| I was surprised it looks very good on mobile too. Will have a
| look later.
|
| It also reminds me of flash, which had a similar selling point.
| Back in the day (early 2000's?) there was a trend building entire
| websites in flash only (requiring a browser plugin to be
| accessable). But svg is supported by any modern browser.
| jakearmitage wrote:
| Oh, man. It's Flash all over again.
| xeromal wrote:
| I stand by my opinion that flash had a positive impact on the
| world. Sure, lots of shit abounded during those days but a ton
| of fun games came out of that environment.
| leephillips wrote:
| Just Homestar is enough to make your opinion objectively
| correct.
| prewett wrote:
| Except that there isn't a slow plugin that needs to be re-
| downloaded and browser re-started every time you use it, which
| were the worst bits of Flash as far as I was concerned.
___________________________________________________________________
(page generated 2021-12-03 23:01 UTC)