SVG是什么

SVG是什么，在重慶網(wǎng)頁設(shè)計公司及重慶網(wǎng)站建設(shè)公司建設(shè)網(wǎng)站的時候經(jīng)常用svg，svg就是可擴展矢量圖形（SVG）是支持動畫和交互性的圖形的基于XML的矢量圖像格式。所有主流的現(xiàn)代Web瀏覽器都支持它，可以被壓縮，可擴展和設(shè)備無關(guān)。在支持它的任何設(shè)備上看起來都很棒。設(shè)計師的另外一個好處就是每一個現(xiàn)代化的設(shè)計工具都可以在讀寫上處理它。

SVG對設(shè)計師很重要，因為它允許我們遠(yuǎn)離沉重的圖形文件和解決障礙。無論其渲染的屏幕如何，SVG將保持清晰干凈，頁面加載時間比PNG或JPG更短。這在許多方面是一個理想的場景，但它沒有最簡單的導(dǎo)出過程。

由于SVG文件是基于文本的，所以用于導(dǎo)出文件的編輯器很可能不會輸出最干凈或最完美的代碼。與柵格圖像不同，代碼是您設(shè)計的圖形的描述，轉(zhuǎn)換為人類可讀的文本文件，因此其大小不取決于文件的分辨率。它包含其形狀，梯度，層，效果，掩模等的描述。由于這些特質(zhì)，構(gòu)建圖形的方式將會影響代碼。

不幸的是，這是SVG的主要缺點。沒有兩次單擊“另存為...”工作流，其中輸出始終是我們想要的。有可能你會發(fā)現(xiàn)自己在做一些調(diào)整，以便按照你的意愿使用這些圖形。

設(shè)計人員越來越熟悉編碼，但即使不是編碼，也不要因此而受到威脅。任何具有HTML基礎(chǔ)知識的人都能夠調(diào)整SVG的出口。本文介紹使用這些文件時可以使用的技巧。

我們構(gòu)建圖形的方式

在任何您使用的編輯器中，您可以通過多種方式創(chuàng)建一個看起來完全相同的形狀。以一個圓圈為例。您可以創(chuàng)建一個寬度和高度相等的橢圓形，確定的行程厚度和該筆畫的顏色。您也可以將相同的形狀轉(zhuǎn)換為輪廓，甚至可以在具有不同尺寸的兩個橢圓之間進行布爾運算的結(jié)果。

即使這3種形狀看起來與眼睛相同，它們的SVG出口也不一樣。您使用的編輯器將將形狀轉(zhuǎn)換為代碼，并且由于三種形狀的設(shè)計不同，所以三種代碼將不同。

層命名

有一個堅實的層次命名法有很長的路要走。大多數(shù)編輯器將保留您正在使用的圖層名稱，將它們用作SVG代碼中的ID。這可能是許多沖突的大門。例如，如果您嘗試從設(shè)計中導(dǎo)出少量SVG資產(chǎn)，并且這些資產(chǎn)共享相同的層名稱 - “Oval”，則編輯器將輸出代碼，其中這些項的ID為“橢圓形”。在HTML中，每個id必須是唯一的，否則我們將面臨未定義和不穩(wěn)定的行為，例如不正確的渲染或甚至形狀的組合。

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <circle id="Oval" stroke="#979797" cx="99" cy="99" r="98">
 </circle> </g>

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <circle id="Oval" fill="#D8D8D8" cx="98" cy="98" r="98">
 </circle> </g>

擁有堅實的層次結(jié)構(gòu)不僅是我們設(shè)計的一個很好的方式，一旦我們開始出口這些資產(chǎn)，這也將為我們節(jié)省時間。

風(fēng)格和效果

以類似的方式，當(dāng)使用圖層樣式和效果時，有幾種方法可以獲得相同的結(jié)果。一個很好的經(jīng)驗法則是始終保持盡可能簡單的方式，因為這將是解決任何問題的最佳方式。這也是混合模式。

如果您無法避免在圖形中使用混合模式，請始終將導(dǎo)出的文件加載到幾個瀏覽器中，并查看它是如何呈現(xiàn)的。如果實際結(jié)果不可用，您可能需要找到解決方法。

例如，Illustrator包括SVG過濾器。使用這些過濾器將產(chǎn)生更好的輸出。如果要使用常規(guī)的Photoshop過濾器，導(dǎo)出將不會是矢量的，而是將會嵌入到SVG文件中的效果的柵格。這樣做會打破這個過程的目的，因為我們將創(chuàng)建一個更重的文件。

當(dāng)然，這一切都取決于你的圖形的預(yù)期用途，所以再也沒有一個簡單的一切都可以適應(yīng)這個方法。一旦你越來越熟悉你的設(shè)計方法如何影響代碼輸出，你會感覺到你的工作流程大大改善。

文字和自定義字體

SVG文件支持自定義字體，但這并不意味著您應(yīng)該濫用它們。由于它們的工作方式與設(shè)計網(wǎng)站時一樣，加載自定義字體會對網(wǎng)站的加載時間產(chǎn)生影響。

<text fill="#232323" fill-rule="evenodd" font-family="AvenirNext-Bold, Avenir Next" font-size="256" font-weight="bold" transform="translate(-373 -382)">
 <tspan x="373.492" y="576">Word</tspan>
 </text>

<svg xmlns="http://www.w3.org/2000/svg" width="678" height="199" viewBox="0 0 678 199">
  <path fill="#3D3D3D" fill-rule="evenodd" d="M584.18,576 L540.916,576 L505.076,453.376 L468.468,576 L424.948,576 L373.492,
  394.752 L420.596,394.752 L449.268,515.328 L482.292,394.752 L527.86,394.752 L560.372,515.328 L590.324,
  394.752 L635.892,394.752 L584.18,576 Z M787.444,511.744 C787.444,522.154719 785.566685,531.583958 781.812,540.032 C778.057315,548.480042 772.937366,555.647971 766.452,
  561.536 C759.966634,567.424029 752.457376,571.989317 743.924,575.232 C735.390624,578.474683 726.260049,
  580.096 716.532,580.096 C706.974619,580.096 697.88671,578.474683 689.268,575.232 C680.64929,571.989317 673.140032,
  567.424029 666.74,561.536 C660.339968,555.647971 655.262685,548.480042 651.508,540.032 C647.753315,
  531.583958 645.876,522.154719 645.876,511.744 C645.876,501.333281 647.753315,491.946708 651.508,
  483.584 C655.262685,475.221292 660.339968,468.138696 666.74,462.336 C673.140032,456.533304 680.64929,
  452.096015 689.268,449.024 C697.88671,445.951985 706.974619,444.416 716.532,444.416 C726.260049,
  444.416 735.390624,
  445.951985 743.924,449.024 C752.457376,452.096015 759.966634,456.533304 766.452,462.336 C772.937366,
  468.138696 778.057315,475.221292 781.812,483.584 C785.566685,491.946708 787.444,501.333281 787.444,
  511.744 Z M746.996,511.744 C746.996,507.64798 746.31334,503.637353 744.948,499.712 C743.58266,
  495.786647 741.620013,492.330682 739.06,489.344 C736.499987,486.357318 733.342685,483.925343 729.588,
  482.048 C725.833315,480.170657 721.481358,479.232 716.532,479.232 C711.582642,479.232 707.230685,
  480.170657 703.476,482.048 C699.721315,483.925343 696.606679,486.357318 694.132,489.344 C691.657321,
  492.330682 689.780006,495.786647 688.5,499.712 C687.219994,503.637353 686.58,507.64798 686.58,511.744 C686.58,
  515.84002 687.219994,519.850647 688.5,523.776 C689.780006,527.701353 691.699987,531.242651 694.26,
  534.4 C696.820013,537.557349 699.977315,540.074657 703.732,541.952 C707.486685,543.829343 711.838642,
  544.768 716.788,544.768 C721.737358,544.768 726.089315,543.829343 729.844,541.952 C733.598685,
  540.074657 736.755987,537.557349 739.316,534.4 C741.876013,531.242651 743.795994,527.701353 745.076,
  523.776 C746.356006,519.850647 746.996,515.84002 746.996,511.744 Z M896.756,482.816 C894.878657,
  482.303997 893.044009,481.962668 891.252,481.792 C889.459991,481.621332 887.710675,481.536 886.004,
  481.536 C880.371972,481.536 875.636019,482.55999 871.796,484.608 C867.955981,486.65601 864.884012,
  489.130652 862.58,492.032 C860.275988,494.933348 858.612005,498.09065 857.588,501.504 C856.563995,
  504.91735 856.052,507.903987 856.052,510.464 L856.052,576 L814.068,576 L814.068,448.512 L854.516,
  448.512 L854.516,466.944 L855.028,466.944 C858.270683,460.458634 862.878637,455.16802 868.852,
  451.072 C874.825363,446.97598 881.737294,444.928 889.588,444.928 C891.294675,444.928 892.958659,
  445.013332 894.58,445.184 C896.201341,445.354668 897.523995,445.610665 898.548,445.952 L896.756,
  482.816 Z M1011.956,576 L1011.956,559.36 L1011.444,559.36 C1007.34798,565.845366 1001.5027,570.837316 993.908,
  574.336 C986.313295,577.834684 978.249376,579.584 969.716,579.584 C960.158619,579.584 951.625371,
  577.706685 944.116,573.952 C936.606629,570.197315 930.249359,565.205364 925.044,558.976 C919.838641,
  552.746636 915.87068,545.536041 913.14,537.344 C910.40932,529.151959 909.044,520.618711 909.044,
  511.744 C909.044,502.869289 910.451986,494.378707 913.268,486.272 C916.084014,478.165293 920.094641,471.040031 925.3,464.896 C930.505359,458.751969 936.819963,453.888018 944.244,450.304 C951.668037,
  446.719982 959.987954,444.928 969.204,444.928 C978.590714,444.928 986.526634,446.719982 993.012,
  450.304 C999.497366,453.888018 1004.53198,457.813312 1008.116,462.08 L1008.628,462.08 L1008.628,
  382.464 L1050.612,382.464 L1050.612,576 L1011.956,576 Z M1010.42,512 C1010.42,507.90398 1009.69467,
  503.893353 1008.244,499.968 C1006.79333,496.042647 1004.74535,492.544015 1002.1,489.472 C999.454653,
  486.399985 996.254685,483.925343 992.5,482.048 C988.745315,480.170657 984.478691,479.232 979.7,
  479.232 C974.750642,479.232 970.398685,480.170657 966.644,482.048 C962.889315,483.925343 959.732013,
  486.357318 957.172,489.344 C954.611987,492.330682 952.692006,495.786647 951.412,499.712 C950.131994,
  503.637353 949.492,507.64798 949.492,511.744 C949.492,515.84002 950.131994,519.893313 951.412,
  523.904 C952.692006,527.914687 954.611987,531.455985 957.172,534.528 C959.732013,537.600015 962.889315,
  540.074657 966.644,541.952 C970.398685,543.829343 974.750642,544.768 979.7,544.768 C984.478691,
  544.768 988.745315,543.829343 992.5,541.952 C996.254685,540.074657 999.454653,537.600015 1002.1,534.528 C1004.74535,531.455985 1006.79333,527.957353 1008.244,524.032 C1009.69467,520.106647 1010.42,
  516.09602 1010.42,512 Z" transform="translate(-373 -382)"></path></svg>

例如，如果您打算在您的網(wǎng)站和圖形上使用Avenir，則不應(yīng)該有任何重大問題。但是為了在SVG中導(dǎo)出的徽標(biāo)加載額外的字體是適得其反的。

在這些情況下，最好的方法是從字母形式中提取輪廓，雖然較輕的重量很可能需要一些調(diào)整，因為概述可能不完美。每當(dāng)我們找到適當(dāng)?shù)钠胶鈺r，該元素將保持其設(shè)計的真實性，而不會影響加載時間。

有一些注意事項：由于文本將被轉(zhuǎn)換為形狀，搜索引擎將無法訪問或“可讀”。對于這些情況，SVG有一些元素，如<title>，將幫助您作為替代。

編輯器輸出圖形輸出的方式

當(dāng)我們完成設(shè)計資產(chǎn)并且一切準(zhǔn)備就緒時，我們必須將資產(chǎn)出口給SVG。在這樣做時，您將看到有很多代碼添加到我們的文件，根本不是必需的。您的形狀將以相同的方式呈現(xiàn)，沒有它。

我們的工作流程的一部分是通過這些導(dǎo)出并檢查該代碼。如前所述，避免冗余將減輕我們對意外行為的疑難解答，特別是如果有多個SVG文件被使用。

有很多工具和插件，將為我們自動化這個過程。例如，SVGO Compressor是一個用于Sketch的基于SVGO的插件，除了其他功能之外，還將清理我們文件中的ID - 通過刪除未使用的ID并將所使用的ID縮小 - 將舍入值縮小為3位小數(shù)，并刪除注釋和描述和其他不必要的代碼，等等。每次從Sketch導(dǎo)出SVG時，它都會在后臺運行，您可以調(diào)整設(shè)置，使其按照所需的方式工作。

另一個推薦的工具是SVGOMG，一種免費的在線工具，可讓我們實時查看我們對我們的文件所做的更改。當(dāng)我們處理復(fù)雜的圖形時，這是特別方便的。它也是基于SVGO。

有很多方法來處理這個過程，這一切都取決于你將如何使用這些資產(chǎn)。請記住，與開發(fā)人員保持流暢的溝通，確保您生產(chǎn)的產(chǎn)品是必要的，可行的和最佳實現(xiàn)方式。