SVG for hero-areas?

Why SVG can be used hero-areas, menus or other areas. Keeping your sloppy design space with SVG

While I’ve been playing around with SVG and Animation, I found an interesting article on medium.com named: Space in Design Systems. For me the article makes 2 interesting points:

a) the term “sloppy design space”
b) the bulk of css-rules we use to define space on webpages.

Even if the article is not at all about SVG, it made me think:

  • Isn’t it possible to bring the so called “sloppy design space” * to the browser? And by doing so, reducing the amount of CSS as a side-effect?
  • Can’t the awkward behavior of text inside of SVG be a advantage in certain scenarios?

The article did not just set this term i like “sloppy design space” (* its the one with the big red cross above), but also highlighted how much CSS-rules have to be written to get the spacing between elements right.

Lets say you want to position text over an image.

Text over an image with HTML / CSS

un-touch
black
padding
black
gray
unp
center
bottom

padding
black
gray
unp
center
bottom

With decreasing screen-size you will come to a point where text will not fit into its bounding box anymore and will line-break.

Here the line-breaking also has an (unwanted) effect of up-scaling the background.

 

Text over an image with SVG

un-touch
black
padding
black
gray
unp
center
bottom

padding
black
gray
unp
center
bottom

In SVG the scaling and positioning of text is different.
Here the text will scale down its size automatically to fit into its bounding box.

So in certain scenarios the awkward behavior of text in SVG can be an advantage.

 

When we try to accomplish something like the above with html, a lot of extra CSS has to be written.
For example:

  • placing the text over the image with a wrapper element.
  • apply position, width and max-width for the wrapper element and the blocks inside
  • set margin and padding for the orange areas and make them block

And you will have to do this for your different screen-sizes.

In SVG almost * all you have to do is a proper markup
(*Except font-family and size and color)

 

Since Text in SVG is also searchable, selectable and accessible like HTML-Text it can be a good alternative for some “hero areas”.
By using SVG you can also reduce the amount of CSS-Rules. And some good news for designers: With SVG you can bring your “Sloppy Design Space” to the browser (at least in a simplified manner) without writing all these CSS. As long as you are able to produce cleaned and optimized SVG, you have a very interesting alternative for hero-areas of webpages. And look at all this green 😉