Why they still don't use SVG for landing pages in 2019?
#svg#html#css#design
Anton Nesterov

Anton Nesterov @nesterow

About: In software engineering since 1999.

Location:
Valencia
Joined:
Jul 24, 2019

Why they still don't use SVG for landing pages in 2019?

Publish Date: Jul 24 '19
5 4

I work at a company with a large web development division. As many other companies in this field, our company has html/css coders to create landing pages by designer's specification.

Recently, I had a need to create a home page for my own project. I asked a designer to draw something simple in vector format. When I've got the result, I was surprised that I don't need to code anything to publish the home page to the web. All work I've done is copy-paste SVG code to the HTML body, and it worked. It worked on any browser I tested it with. The only problem I found so far is that my landing page doesn't have a mobile version. But it is fixable - i just need to add a css media breakpoint for a mobile SVG.

I have to confess I don't have as much experience in web design as in JS development. But I have to raise some questions:

  1. Why not simplify production process for simple static sites and leave this work entirely to Designers?
  2. Are there reasons for people to use html/css in favor of SVG in 2019?

Example on GitHub:
The "code"
The home page itself

Comments 4 total

  • Juan Carlos
    Juan CarlosJul 24, 2019

    SVG is XML, CSS is JSON like.
    XML is hella verbose compared to JSON.
    CSS minifies better than SVG.

    Usually SVG generated by designers is XML+Metadata+Garbage+CSS+JS+Comments that you still need to add HTML+CSS to work.

    • Anton Nesterov
      Anton NesterovJul 24, 2019

      I converted SVG to plain format in order to get rid of useless garbage and editor's meta.

      I still think most of the html+css work can be automated, but I agree that SVG/XML is harder to minify.

  • Austin S. Hemmelgarn
    Austin S. HemmelgarnJul 24, 2019

    Juan Carlos has a good point about verbosity and minification (I would have started with that here if he hadn't covered it so well), but there's another really big aspect to consider here: SVG is nowhere near as accessibility friendly as well written HTML+CSS.

    The reason for this is largely that good HTML is semantic markup, while SVG is almost pure presentational markup. The lack of semantic structure in SVG means that screen readers and other assistive technologies have no real way to know what each block of text is supposed to be, let alone what order to read them out in. Now, it's technically possible to work around this, but doing so requires an insane amount of effort, and almost always means you have to modify the raw SVG XML by hand, and even then you're still not going to be as assistive-technology friendly as a properly written HTML page.

    • Anton Nesterov
      Anton NesterovJul 24, 2019

      Thank you. This is the answer I was looking for. Now I see why no one uses it in the way i described.

Add comment