整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這個適合初學者的指南中，你將學習如何創建一個響應式電子郵件模板。你將跟隨逐步說明以及代碼片段設計一個在任何設備上都看起來很棒的電子郵件模板。
這個項目非常適合渴望掌握電子郵件設計基礎的新手！
（本文視頻講解：java567.com）
者：前端日志
轉發鏈接：https://mp.weixin.qq.com/s/zoEfqIwfsnAWVO8L7xuUuQ
要整理你的頁面重量，但是要保持所有的酷功能嗎?繼續閱讀，看看一個開發人員如何擺脫SVG，并在它的位置使用CSS。
獲得高級管理人員手冊的重要趨勢、技巧和戰略，以競爭和贏得數字經濟。
在這個假期過后，我們中的許多人都想減掉一點體重，那就是體重。在我的應用中，我廣泛地使用SVG元素作為圖像、徽標和圖標。直到最近，我都直接在HTML中呈現SVG元素。這是最簡單的方法。正如您可能通過我的intro語句所猜測的那樣，我一直在通過從HTML中刪除SVG元素來減少頁面權重。它的效果如何?在進行更改之前，主頁是14kb (77kb解壓縮)。更改后，主頁為6kb(未壓縮的30kb)。這是每一頁的“超過有線”字節的57%。我到底做了什么，我做了哪些權衡來獲得一個更小的頁面?讓我們看看以前如何使用SVG。
這是原始的SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg fill="#fff" class="issue-icon" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="m8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm0 14c-3.309 0-6-2.692-6-6s2.691-6 6-6c3.307 0 6 2.692 6 6s-2.693 6-6 6z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M8.5,3h-1C7.224,3,7,3.224,7,3.5v6C7,9.776,7.224,10,7.5,10h1 C8.776,10,9,9.776,9,9.5v-6C9,3.224,8.776,3,8.5,3z" clip-rule="evenodd" fill-rule="evenodd"/>
<path d="M8.5,11h-1C7.224,11,7,11.224,7,11.5v1C7,12.776,7.224,13,7.5,13h1 C8.776,13,9,12.776,9,12.5v-1C9,11.224,8.776,11,8.5,11z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>
我將它定義為一個Rails“helper”，它將直接呈現在HTML中。這個元素在頁面上重復了很多次，每次我們必須發送完全相同的SVG字符串，該字符串將相同的字節數添加到頁面大小。為了解決這個問題，我將SVG代碼移動到我的圖像目錄中，然后我使用鏈輪來“內聯”圖像通過一個數據url。
數據URL如何工作?通常，在CSS元素背景下的URL會說“出去，在不同的URL中獲取該資產”。相反，一個“數據”URL會編碼呈現圖像所需的所有數據，而無需創建新的網絡請求。這里有一個例子:
background: url("data:image/svg+xml;charset=utf-8,
%3Csvg
version='1.1'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
width='512'
height='512'
viewBox='0 0 512 512'
%3E%3Cpath d='M224 387.814v124.186l-192-192 192-192v126.912c223.375 5.24 213.794-151.896 156.931-254.912 140.355 151.707 110.55 394.785-156.931 387.814z'
%3E%3C/path%3E
%3C/svg%3E");
這個“url”包含整個圖像內容，不需要發出HTTP請求。
在鏈輪中，當前支持的數據URL通過創建一個Base64字符串來支持，但是在以后的版本中，它將是URL轉義，以避免使用Base64的額外開銷。您可以閱讀更多關于為什么不使用base64 SVG的內聯圖像。
以前，我說過我用鏈輪來做這個改變。在我的項目中，這是sassrails添加警告的咒語。svg作為我的CSS的數據url:
.warning-svg {
width: 16px;
height: 16px;
display: inline-block;
background: asset-data-url("warning.svg");
}
資產數據url被解釋為一個指令，它接受警告的內容。svg圖像和“inlines”它們使得不需要額外的HTTP請求。如果你用的是ERB，它可能是這樣的:
.warning-svg {
width: 16px;
height: 16px;
display: inline-block;
background: url(<%= asset_data_uri 'warning.svg' %>);
}
現在，當您訪問該頁面時，SVG元素僅通過應用程序發送一次。css，然后被重新使用很多次，通過war- svg類。這意味著為最終用戶下載HTML所需的時間更少，而且由于這些資產是與未來的高速緩存頭一起服務的，所以它們只會被瀏覽器下載一次。更好的是，該站點正在Cloudflare CDN的后面服務，因此對于稍微大一點的CSS文件，應用服務器上沒有額外的負擔。
您可以看到我實現此更改的pull請求。
有什么缺點嗎?這種方法(對我來說)最大的問題是，我失去了通過CSS控制SVG元素填充(顏色)的能力。以前在HTML中使用SVG，如果我想改變元素的顏色，很簡單，我在CSS中做了。這里有一個例子，可以用CSS將填充色改為紅色。
一旦我將SVG元素移出頁面，我就無法通過純CSS進行這種類型的修改。對于這種情況，我決定轉換元素，使懸浮狀態變得明顯:
如果顏色變化是絕對需要的，那么我可以生成兩個具有不同填充值的SVG元素，并更改鼠標懸空的背景元素。您可以在其他選項上看到一個堆棧溢出線程。
除了在主頁上使用“警告”SVG之外，我還在“repo show”頁面上使用它，但是它的填充不同。它是灰色的而不是白色的。在這種情況下，去掉顏色變化是不合適的;但是，我可以使用不透明的CSS屬性來近似一個顏色的變化，這將影響SVG元素。
如果您不想在CSS中使用數據URL，您也可以通過標記將其呈現為普通圖像。您還可以使用使用標記，它允許您通過HTML發送元素，但之后再使用和操作，就好像它是直接在HTML中一樣。
在我的例子中，所有呈現的元素都存在于我的絕大多數頁面中，所以將它們放在那些會被瀏覽器和我的CDN緩存的地方是有意義的。
一些關于將SVG元素轉換為內聯CSS元素的說明:
您需要確保將高度和寬度設置為元素，因為SVG只是“背景”。
您還需要確保SVG正在被格式化并正確地服務。對我來說，我有一個SVG元素，它缺少xml聲明:
<?xml version="1.0" encoding="UTF-8"?>
和相同的一個失蹤了xmlns = " http://www.w3.org/2000/svg "屬性。如果您在瀏覽器中通過CSS檢查器單擊圖像URL，它應該顯示是否存在錯誤。您還需要顯式地在圖像中設置填充屬性，否則，它們將默認為黑色。
總的來說，這一變化相當簡單，57%的小頁面也不太破舊。
雖然仍然有可能希望將SVG元素直接放到HTML中，但是考慮頁面的權重和成本。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
