Outil pour créer des SVG

Petite aide visuelle pour aider à la création de formes SVG simples (triangles, diagonales, etc...) pour les utiliser en images de fond.

by oilvier

HTML

<div>
  <!-- Ici on définit les valeurs du viewbox de notre SVG -->
  <ul>
    <li>0,0</li>
    <li>1600,0</li>
  </ul>
  <ul>
    <li>0,140</li>
    <li>1600,140</li>
  </ul>
  <div>
    <!-- Ici on ajoute notre SVG -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 140" preserveAspectRatio="none">
      <defs>
        <clipPath id="cut-off">
          <polygon points="0,140 1600,0 1600,140" />
        </clipPath>
      </defs>
      <polygon fill="tomato" stroke="tomato" stroke-width="10" points="0,140 1600,0 1600,140" clip-path="url(#cut-off)" />
    </svg>
  </div>
</div>

<p>
  Encoder le SVG en dataURI <a href="http://meyerweb.com/eric/tools/dencoder/" target="_blank">http://meyerweb.com/eric/tools/dencoder/</a>
</p>

<p>
  Ajouter le au CSS (remplacer les coordonnées du SVG par celles de votre SVG)
</p>
<pre>
  <code>
  .foo {background-image:url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%2033%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3CclipPath%20id%3D%22cut-off%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%220%2C0%20320%2C0%200%2C33%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FclipPath%3E%0A%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%3Cpolygon%20fill%3D%22tomato%22%20stroke%3D%22tomato%22%20stroke-width%3D%2210%22%20points%3D%220%2C0%20320%2C0%200%2C33%22%20clip-path%3D%22url(%23cut-off)%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");}
</code>
</pre>

SCSS

$grid-color:gray;
* {
  margin: 0;
  padding: 0;
}

body {font-family:sans-serif;}
p {margin:0 0 20px;}
pre {overflow:auto;}
pre, code {font-family:monospace;}
svg {
  vertical-align: bottom;
}

div {
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-family: monospace;
  ul:last-of-type {
    order: 3;
  }
  div {
    display: block;
    border: 1px dashed gray;
    padding: 0;
    background-image: linear-gradient(0deg, transparent 24%, rgba($grid-color, .5) 25%, rgba($grid-color, .5) 26%, transparent 27%, transparent 74%, rgba($grid-color, .5) 75%, rgba($grid-color, .5) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba($grid-color, .5) 25%, rgba($grid-color, .5) 26%, transparent 27%, transparent 74%, rgba($grid-color, .5) 75%, rgba($grid-color, .5) 76%, transparent 77%, transparent);
    background-size: 25px 25px;
  }
}

ul {
  display: flex;
  list-style: none;
  & > li {
    flex: 1 1 0%;
    padding: 5px 0;
    &:last-child {
      text-align: right;
    }
  }
}