39: 将所有内容整合在一起 – 一个使用 SVG 的真实世界项目

在这个视频中，我们尝试将学到的知识整合在一起，创建一个使用多种不同方式的 SVG 的网站。我们将创建一个虚构的“梦幻甜甜圈”在线甜甜圈商店的网站。以下是我们的步骤。

我们在 MAMP 中创建一个本地开发域。这是一个很好的步骤，因为它让网站的行为更像是在实时服务器上的网站（而不是 file:// URL 那样的）。具体来说，在本例中，本地域名将使我们所做的 <use> 相关操作正常工作。

我们在项目中使用 Grunt。我们 使用它 构建图标系统（包括 logo）的 defs.svg 文件。我们也使用它来 优化 SVG 图像。

logo 只是一个名为 logo.svg 的 SVG 文件，位于我们的项目中。Grunt 将它与我们要在系统中使用的其他图像一起压缩，并将其放入 `includes/defs.svg` 中。这使得使用 logo 变得非常快速方便。我们的整个头部变成了

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

我们设计的头部本身有一个倾斜的、波浪形的、粉红色的背景。这对于 SVG 也是非常棒的。用其他方式实现会很困难，而使用 SVG，它只是一个可怜的 800 字节文件，可以完美地缩放。

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

在网站的主要内容中，我们展示了三种不同类型的甜甜圈。从技术上讲，它们可以是背景图像，也可以是图标系统的一部分，但我更倾向于将它们视为内容图像。我设想 CMS 拥有一个“甜甜圈”页面类型，并在其中发布这些页面作为独立的页面。就像一篇小博客文章或其他类似的东西。图像构成了该文章内容的一部分。它不是图标，也不是背景，而是内容。

所以，我们使用 <img>。

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

  ...

每个甜甜圈区域也都有一个“添加到购物车”按钮。我们在按钮上使用了一个小购物车图标进行装饰。它和我们使用 logo 的方式一样简单。所以，这段甜甜圈 HTML 代码以这样结束

  ...
  
  <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>

页脚也有一个波浪形的粉红色背景，我们使用与头部相同的方式实现。

总的来说，这是一个非常不错的网站。它应该在任何地方看起来都很漂亮，整个网站的重量不到 60 KB，其中自定义字体占据了最大的部分。

这个网站还有很多东西可以改进。我们没有处理备用方案。我们没有进行任何动画处理，而这个网站有足够有趣的氛围，因此动画处理会很不错。我们没有优化所有可以优化的地方。但是，我们在本系列中已经涵盖了所有这些内容，因此，您可以随意下载这个项目（仅供熊使用），并将其用作实验游乐场，练习对其进行改进。

文件

39-project.zip