• 本文已獲得原作者 Chris Coyier 的授權(quán)

• 譯文出自：掘金翻譯計(jì)劃

• 譯者： MAYDAY1993

• 校對者： zhouzihanntu hpoenixf

可能你想控制任何你放在網(wǎng)上的圖片的尺寸，嗨！就是你！ Logo !你應(yīng)該是這個(gè)大?。?/em>

<img src="logo.png" class="logo" />

.logo {
  width: 220px;
  height: 80px;
}

下面繼續(xù)

并且圖片也應(yīng)該能任意控制大小。

但是如果你正在縮放的元素恰好是 svg，結(jié)果可能并不是你期待的。定義 svg 的尺寸比定義 img 復(fù)雜一點(diǎn)。說這句不是嚇你喔。復(fù)雜不是壞事，因?yàn)樗o你更多的控制并且多了一些有趣的可能性。

當(dāng)你涉及 SVG 圖片的尺寸，記住下面兩個(gè)概念：

• viewport 就是元素的高度和寬度：即 SVG 圖片可見區(qū)域的大小。經(jīng)常直接在 SVG 上或者通過 CSS 設(shè)置width和height屬性。

• viewBox 是 svg 的一個(gè)屬性，來確定坐標(biāo)系和縱橫比。四個(gè)值是x,y,width, 和height。

我們一般這樣做：

<svg width="100" height="100" viewBox="0 0 100 100">

<!-- alternatively: viewBox="0, 0 100, 100" -->

在這種情況下，視圖大小和 viewBox 完全一致(Fig 6.1)。 SVG 將會在它視覺上占據(jù)的那個(gè)地方展現(xiàn)出來。
CodePen Embed

Fig 6.1: viewport 和 viewBox 完全一致。這發(fā)生在沒有設(shè)置svg的長度或?qū)挾龋▽傩曰?CSS 都沒有），或者如果你設(shè)置了長度和寬度，它們和viewBox的縱橫比保持一致。

現(xiàn)在我們將寬度和高度翻倍，像這樣：

<svg width="200" height="200" viewBox="0 0 100 100">

svg 會在 200 * 200 的元素的左上角占據(jù) 100 * 100 的區(qū)域么？不會， svg 內(nèi)的每個(gè)都會在新的更大的空間擴(kuò)大(Fig 6.2)。
CodePen Embed

Fig 6.2: viewport 變大而 viewBox 保持不變，圖片放大來適應(yīng) viewport。

正方形的縱橫比依然很匹配。這就是為什么將 SVG 內(nèi)任何地方的數(shù)值認(rèn)為是像素是沒用的，因?yàn)樗麄儾皇窍袼兀凰麄冎皇窃谝粋€(gè)任意的坐標(biāo)系里的數(shù)值。

那么，如果縱橫比不匹配怎么辦？

<svg width="300" height="75" viewBox="0 0 100 100">

默認(rèn)情況下，SVG將盡可能大的展現(xiàn)自己，沿著最長的尺寸居中(Fig 6.3)。
CodePen Embed

Fig 6.3: viewport 變大了，但不再匹配 viewBox 的縱橫比。所以默認(rèn)情況下，圖片在沒被裁剪的情況下盡可能大的展現(xiàn)出來，并在比例大的方向居中。

如果你想重新控制這個(gè)行為， svg 元素有個(gè)屬性會起作用！

preserveAspectRatio

像這樣：

<svg preserveAspectRatio="xMaxYMax">

這個(gè)值的 x 和 Y 部分后面是 Min, Mid, 或 Max。 SVG 通常在視圖中居中的原因是有個(gè)默認(rèn)的 xMidYMid 值。如果你把值改成 xMaxYMax，這就告訴了 SVG：確保在水平方向上盡可能靠右，豎直方向上盡可能靠底部。然后在沒有裁剪的情況下盡可能的大。

“沒有裁剪”部分是 preserveAspectRatio 的另一個(gè)方面。默認(rèn)值是 xMidYMid meet －注意下 “meet” 。你可以用 slice 來代替 meet 意思是：完整地填充區(qū)域；裁剪也可以。

和 meet 組合會有九種可能的對齊的值(Fig 6.4)。

Fig 6.4: 帶 meet 值的 preserveAspectRatio 的例子。

和 slice 組合也有九種可能的對齊的值(Fig 6.5)。

Fig 6.5: 帶 slice 值的 preserveAspectRatio 的例子。

為了證實(shí)這個(gè)想法我做了一個(gè)測試工具。關(guān)于這個(gè)主題 Sara Soueidan 也寫了一篇有深度的文章，她很好的研究了把這個(gè)想法關(guān)聯(lián)到 CSS。 background-size 屬性有兩個(gè)值：contain 和 cover。contain 值的作用是“確保整個(gè)圖片在屏幕縮小的情況下仍然可見”，就像 meet。cover 值的作用是“確保圖片覆蓋整個(gè)背景區(qū)域，即使圖像的某些部分可能被裁減，”，就像 slice。

就算是對齊部分也有一個(gè)對應(yīng)的 CSS 屬性： background-position。默認(rèn)的 background-position值是0 0，意思是 “top left”。就像 xMinYMin 一樣。如果你把它改成 50% 100%，那就像 xMidYMax！

Fig 6.6 這些例子讓聯(lián)系更清晰。

preserveAspectRatio 值 和 CSS 屬性

Fig 6.6: preserveAspectRatio 的值和與之相似的 CSS 屬性

記?。核麄冊诖a不是通用的；只是概念上相關(guān)。

如果你不想考慮縱橫比，讓 SVG 隨視圖大小縮放，就像光柵圖像那樣呢？把 preserveAspectRatio 屬性設(shè)置為 ‘none’ 吧(Fig 6.7)!

<svg preserveAspectRatio="none" viewBox="0 0 100 100">

CodePen Embed

Fig 6.7: preserveAspectRatio="none" 的例子。

Amelia Bellamy-Royds 寫了篇關(guān)于縮放 SVG 的全面的文章，在文章中她敘述了 svg 實(shí)際上可以包含其他的有不同縱橫比和行為的 svg，所以你可以讓一張圖部分縮放，其余部分正常顯示；這對于 svg 來說又酷又獨(dú)特。

畫板尺寸縮放的方法

當(dāng)你在編輯軟件中畫 SVG，軟件可能提供給你某種畫板來在上面畫。這不是個(gè)技術(shù)的 SVG 術(shù)語；它實(shí)際上是 viewBox 的一個(gè)視覺上的比喻。

假設(shè)你在為一個(gè)網(wǎng)站設(shè)計(jì)一整套圖標(biāo)。一種方法是讓所有的畫板接觸圖標(biāo)的每個(gè)邊(Fig 6.8)。

Fig 6.8: 在 Adobe Illustrator 中圖片接觸到邊緣的例子。

這兒有個(gè)快捷的小技巧來在 Illustrator 里裁剪畫板：選擇畫板工具，然后在 Presets 菜單選 “Fit to Artwork Bounds”(Fig 6.9).

Fig 6.9: 在 Adobe Illustrator 里菜單選項(xiàng)可以根據(jù)圖片的邊緣重新定義畫板大小。

這個(gè)技巧的優(yōu)點(diǎn)是對齊(Fig 6.10)。如果你想把這些圖標(biāo)的任一邊和任何其他的東西對齊，實(shí)現(xiàn)起來很簡單。并不存在你需要應(yīng)對的魔幻之處或需要不斷調(diào)整的定位樣式。

.icon.nudge {
  position: relative;
  right: -2px; /* UGHCKKADKDKJ */
}

Fig 6.10: 圖標(biāo)無間隙地和邊緣對齊。

這個(gè)裁剪技術(shù)的缺點(diǎn)是相對的尺寸。想象下你采取一般的方法來定義圖標(biāo)的寬度和高度，像這樣：

.icon {
  width: 1em;
  height: 1em;
}

一個(gè)又高又細(xì)長的圖標(biāo)將會縮小來適應(yīng)那個(gè)區(qū)域，并且可能顯得很小?；蚴悄憧赡茉趪L試有意把一個(gè)小的星星形狀作為一個(gè)圖標(biāo)，期待著星星有一個(gè)正方形的縱橫比，因此會放大來填充區(qū)域，然而結(jié)果比你想要的還大。

這有個(gè)例子關(guān)于兩個(gè)圖標(biāo)的尺寸都設(shè)置成正方形(Fig 6.11)。“expand” 圖標(biāo)看上去很正常，因?yàn)樗幸粋€(gè)正方形的縱橫比來調(diào)整。但是 “zap it” 圖標(biāo)有一個(gè)高高窄窄的縱橫比，所以它看上去很小，像在同樣的正方形區(qū)域上浮動。

Fig 6.11: 兩個(gè)圖標(biāo)在一個(gè)按鈕中尺寸是同樣的正方形區(qū)域。上面的一個(gè)響應(yīng)的很好，但是底部的那個(gè)很奇怪的在區(qū)域中浮動。

另一個(gè)方法是制作尺寸一致的畫板(Fig 6.12)：

Fig 6.12: Illustrator 里的畫板大小相同的圖形的例子。

優(yōu)點(diǎn)和缺點(diǎn)恰恰是可逆的。你可能遇到對齊的問題，因?yàn)椴⒉皇撬袌D標(biāo)的邊會碰到 viewBox 的邊，這是沮喪的并且有時(shí)候可能需要調(diào)整(Fig 6.13)。

Fig 6.13: 你可以調(diào)整圖標(biāo)的相對大小，但那樣會讓對齊更困難。

但是你不會有相對的尺寸問題，因?yàn)閷τ谒械漠嫲鍋碚f viewBox 是一樣的。如果任何一個(gè)圖標(biāo)看上去太大或太小，你可以調(diào)整畫板來使其符合這一系列。

既然我們在了解尺寸，現(xiàn)在是時(shí)候來研究 SVG 是如何適配響應(yīng)式設(shè)計(jì)的彈性世界的。

響應(yīng)式的 SVG

響應(yīng)式設(shè)計(jì)的一個(gè)特點(diǎn)是流式布局。內(nèi)容－包括圖片－被設(shè)計(jì)來適應(yīng)它的容器和屏幕。如果響應(yīng)式設(shè)計(jì)對你來說是陌生的，關(guān)于這個(gè)主題 Ethan Marcotte 在 2010 年的重要的文章是一個(gè)很好的選擇來開始了解響應(yīng)式設(shè)計(jì)。SVG 與響應(yīng)式設(shè)計(jì)很適合。

• 響應(yīng)式設(shè)計(jì)是彈性的。SVG 也是！它在每個(gè)尺寸都呈現(xiàn)的很好。
  *響應(yīng)式設(shè)計(jì)是一門關(guān)注一個(gè)網(wǎng)站在任一瀏覽器中如何呈現(xiàn)和如何表現(xiàn)的哲學(xué)。相對小的 SVG 文件和像一個(gè) SVG 圖標(biāo)系統(tǒng)的性能優(yōu)先的策略就是響應(yīng)式設(shè)計(jì)的一部分。
  

但可能 SVG 與響應(yīng)式設(shè)計(jì)最顯著的聯(lián)系是對 CSS 媒體查詢的可能性。媒體查詢基于瀏覽器窗口的高度或?qū)挾鹊纫蛩赜?CSS 來移動，隱藏或顯示元素。這些元素能是任何東西：側(cè)邊欄，導(dǎo)航欄，廣告和你有的任何東西。也可能是 SVG 元素。

想象一下，有一個(gè)圖標(biāo)能基于可用空間的大小展現(xiàn)不同層次的細(xì)節(jié)。這就是當(dāng) Joe Harrison 設(shè)計(jì)一個(gè)真正簡潔的用著名圖標(biāo)設(shè)計(jì)的 demo時(shí)想到的東西, (Fig 6.14).

Fig 6.14: Joe Harrison 的不同尺寸迪斯尼圖標(biāo)的 demo。

在網(wǎng)站上，我們經(jīng)常能用其他的圖片來替換圖片。這里吸引我們的是我們并沒有替換圖片；它們都是同一張圖片。或至少它們能是同一張。簽名 “D” 和在最復(fù)雜的圖表版本中使用的就是同樣的 “D”。

在 CSS 中通俗的寫法。

我們像這樣組織 SVG：

<svg class="disney-logo">
 <g class="magic-castle">
    <!-- paths, etc -->
  </g>
  <g class="walt">
    <!-- paths, etc -->
  </g>
  <g class="disney">
    <path class="d" />
    <!-- paths, etc -->
  </g>
</svg>

順便說一下，在 Illustrator 中這很容易實(shí)現(xiàn)(Fig 6.15)。在這里你寫的組件和名稱在以 SVG 輸出時(shí)變成 ID，你能使用這些 ID 來定義樣式。然而，我個(gè)人更喜歡使用類因?yàn)樗鼈儾皇俏ㄒ坏模ㄋ阅悴粫蝗挥龅皆陧撁嫔嫌卸鄠€(gè)同樣的 ID）并且類有一個(gè)更低更好管理的 CSS specificity 特性權(quán)重。在一個(gè)代碼編輯器里非常簡單地就能用查找替換操作把 ID 變成類。

Fig 6.15: 在 Adobe Illustrator 中命名的層和形狀。

對應(yīng)的CSS像這樣：

@media (max-width: 1000px) {
  .magic-castle {
    display: none;
  }
}
@media (max-width: 800px) {
  .walt {
    display: none;
  }
}
@media (max-width: 600px) {
  .disney > *:not(.d) {
    display: none;
  }
}

注意，有一個(gè)人為的例子在不同的斷點(diǎn)隱藏部分圖片，但是這就是你將要做的，同時(shí)可能有一些尺寸調(diào)整。你能用 CSS 做的任何事情都列在這兒了。可能某些動畫在某些斷點(diǎn)是合適的，但是在其他并不合適?？赡埽ㄗg者注：求助攻）?？赡苣愀淖円恍┨畛漕伾珌砗喕噜彽耐庑?。

事情會更有趣！取決于 SVG 的使用方式，這些媒體查詢實(shí)際上可能是不同的。作為 img, iframe, 或 object 使用的 SVG 有它自己的視圖。這就意味著嵌入在內(nèi)的 CSS 以此為基礎(chǔ)來響應(yīng)媒體查詢，而不是整個(gè)的瀏覽器窗口視圖。這就意味著你是基于圖片的寬度來聲明以圖片為基礎(chǔ)的媒體查詢，而不是整個(gè)頁面的寬度。

這是個(gè)非常吸引人的想法：一個(gè)元素基于它自己的屬性安排自己，而不是頁面。我是這么寬么？對。我是這么高么？也是。_那樣， SVG 響應(yīng)它所在的情景而不是它所在的任意文檔。

正如我寫的，這在 CSS 中稱作“元素查詢”，但是實(shí)際上在正常的 HTML/CSS 中并不存在。又一次地，SVG 具有超前意識。

來看看動畫

談到 SVG 擅長的事情，讓我們接下來看看動畫。至今為止我們一直依賴的一切已經(jīng)為我們準(zhǔn)備好了。緊緊抓住吧！