Verbose SVG Reduced

Web deserves better

by marakoss

HTML

<div class="container">
<div class="item">


<h1><em>That</em> verbose SVG... reduced</h1>

<p>Could we maybe get some vector graphics format for <b>web</b> that is you know... less verbose? I know that SVG was designed to be human readable and easily editable like XML. But mostly for our usage on the web, we don't need this readability feature. And you know what? The end user doesn't care either. All he cares about is the load speed. If your web app has like 10 icons you probably don't care. But if your web app has like 100 icons, we are talking here about tens of kilobytes in savings - that could be very noticeable on like 3G mobile internet. Take a look with me at these examples:</p>
<div class="flex">

<div class="item">

<h3>Original SVG <i>(303 bytes)</i></h3>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>

</div>
<div class="item">

<h3>Reduced SVG <i>(182 bytes)</i></h3>
<svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="3" ><polyline points="9 11 12 14 22 4" /><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" /></svg>

</div>
<div class="item">

<h3>GIF base64 <i>(*388 bytes)</i></h3>
<img src="data:image/gif;base64,R0lGODlhLQAqAJEDAGZmZszMzAAAAP///yH5BAEAAAMALAAAAAAtACoAAALXnAcgy+3vjpwnwIsjRUDaDF6bInRGiD4UuXRfCk8sk8C2NNNPsPU+DumofsRV8KQpKnOtw1BJZJYkT2hPanImrcZHVtvgjo6UqhhBLm/FWJ/5kPi13WsD6Qv0Et8zPFq/t8b0NYcUZsggQ1aIuACWqOjF2Cjw6NgV4jfw9GaX2cNZB5ehSWlZ6SM1RXe4KZrXUHo6GxVbFNoq13Sb1DkiO4ELefYjfEnMOuyLbNrMvGGM+qzWuswczTPt8aRqY5PV7Z2STSl+s20uTl6RDgOwPhEQnv6+UQAAOw==" />

</div>
</div>

<br />

<small><i>*bytes including the img tag</i></small>

<p>
To be fair - you will probably use the icons in smaller dimensions. As we know for bitmap images applies that smaller the...

CSS

body {
	background: #f9f9f9;
	color: #333;
}

.container {
	display: flex;
}

.container > .item {
	max-width: 480px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

img, svg, h2, h3, small, i {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

p {
	text-indent: 1em;
}

h3 {
	padding-bottom: 20px;
}

svg {
	width: 48px;
}

h3 i {
	display: block;
}

.flex {
	display: flex;
	text-align: center;
	align-items: center;
}

.item:not(:last-child) {
  margin-right: 10px;
}

small, i {
	color: #777;
}

code {
	display: block;
	background: rgba(255, 255, 0, 0.2);
	padding: 20px;
	margin: 10px -20px;
}

code b {
	color: #900;
}