39: Alles zusammenbringen – Ein reales Projekt mit SVG

In diesem Video versuchen wir, vieles von dem, was wir gelernt haben, zusammenzubringen, indem wir eine Website erstellen, die SVG auf vielfältige Weise nutzt. Wir erstellen eine Website für den fiktiven Online-Donut-Shop „Dreamy Donuts“. Dies ist der Prozess, den wir verfolgen.

Wir erstellen eine lokale Entwicklungsumgebung mit MAMP. Dies ist immer ein guter Schritt, da die Website sich dadurch viel mehr wie eine Website auf einem Live-Server verhält (im Gegensatz zu einer Dateipfad-URL). Insbesondere in unserem Fall ermöglicht die lokale Domain, dass die `<use>`-Funktionen, die wir verwenden, ordnungsgemäß funktionieren.

Wir verwenden Grunt für das Projekt. Wir nutzen es, um die Datei `defs.svg` für unser Icon-System (einschließlich des Logos) zu erstellen. Und wir nutzen es auch, um die SVG-Bilder zu optimieren.

Das Logo ist einfach eine SVG-Datei namens `logo.svg` in unserem Projekt. Grunt packt es zusammen mit dem anderen Bild, das wir in unserem System verwenden werden, und legt es in `includes/defs.svg`. Das macht die Verwendung super schnell und einfach. Unser gesamtes Header wird

<header class="main-header">
  <a href="/" class="logo">
    <svg>
      <use xlink:href="includes/defs.svg#logo"></use>
    </svg>
  </a>
</header>

Der Header selbst wurde von uns so gestaltet, dass er diesen abgeschrägten, wellenförmigen, pinken Hintergrund hat. Das ist auch für SVG großartig. Auf andere Weise wäre das schwer umzusetzen, und mit SVG ist es eine mickrige 800-Byte-Datei, die perfekt skaliert.

.main-header {
  background: url(images/header-bg.svg) -20px top no-repeat;
  background-size: 1000px;
}

Im Hauptinhalt der Website zeigen wir drei verschiedene Donut-Sorten. Technisch gesehen könnten dies Hintergrundbilder sein oder Teil unseres Icon-Systems, aber eigentlich sehe ich sie mehr als Inhaltsbilder an. Ich stelle mir ein CMS mit einem „Donut“-Seitentyp vor, das diese als einzelne Seiten veröffentlicht. Wie ein kleiner Blogbeitrag oder so etwas. Das Bild ist Teil des Inhalts dieses Beitrags. Es ist kein Icon, kein Hintergrund, es ist Inhalt.

Also verwenden wir `<img>`.

<div class="donut-type">
  <header>
    <img src="images/glazed.svg" alt="">
  </header>
  <h2>Glazed Donut</h2>
  <p>Our classic recipe; since 1948.</p>

  ...

Jeder dieser Bereiche für einen Donut hat auch einen „In den Warenkorb“-Button. Wir verwenden dort ein kleines Warenkorb-Icon, um den Button zu verschönern. Das ist genauso einfach wie das, was wir mit dem Logo gemacht haben. Dieser Teil des Donut-HTML-Codes endet also so:

  ...
  
  <div class="add-to-cart">
    $1.99
    <a href="#" class="button">
      Add to Cart
      <svg class="icon icon-cart">
        <use xlink:href="includes/defs.svg#cart"></use>
      </svg>
    </a>
  </div>
</div>

Der Footer hatte ebenfalls einen wellenförmigen pinken Hintergrund, den wir auf die gleiche Weise wie den Header gestalten.

Alles in allem eine ziemlich gute kleine Website. Sie sollte überall scharf aussehen und das Ganze wiegt unter 60 KB, wobei die benutzerdefinierten Schriftarten den größten Teil davon ausmachen.

An dieser Website gäbe es noch viel mehr zu tun. Wir haben uns nicht um Fallbacks gekümmert. Wir haben nichts animiert, und die Website hat eine lustige Ausstrahlung, die das schön machen würde. Wir haben nicht alles optimiert, was wir hätten optimieren können. Aber wir haben das alles in dieser Serie behandelt, also laden Sie dieses Projekt gerne herunter (nur für Mac) und nutzen Sie es als Experimentierfeld und üben Sie, es zu verbessern.

Dateien

39-project.zip