最近，我注意到許多網站不使用圖像作為他們的標志，甚至一些內容圖像。我無法復制這些圖像或在新標簽中打開圖像。

當我檢查元素時，那些是代碼，不是真實的圖像。

示例:

挽救（saving的簡寫）

<svg xmlns="http://www.w3.org/2000/svg" width="210" height="45" viewBox="0 0 286.2 58.1"><path d="M63,10.9c-4.4-7.2-14.1-3.1-12,5.2C53.8,27.3,67.4,30,72.4,40c2.7,5.4,1,10.9-3.2,13.3s-11.6,3.4-16.1.1c-2.3-1.6-2.1-2.8-3.3.3-.3,1-1,2.1-2.2,1s-1.9-6.9,1.4-9.1,3.5-.6,5.4,1.3c4.7,3.9,10.7,2.8,12.2-.4s0-5.3-2-7.6-7.4-6-11.2-10.4S44.7,16.3,47.2,9.9s8.3-10.7,15.6-7c4.3,2.2,8.5,7.2,6.1,12.1s-6.8,4.5-9.2,1,4.5-3.1,3.3-5.1Z" fill="#000" fill-rule="evenodd"></path><path d="M82,22.5c.2,6.2-6.8,5.7-7-.2A3.1,3.1,0,0,1,78.5,19a3.9,3.9,0,0,1,2.2,1A3.8,3.8,0,0,1,82,22.5Z" fill="#000" fill-rule="evenodd"></path><path d="M75.5,36.3h-.3c-2.9,1.7-2-1.7-.5-3.7s3-2.7,4.3-2.6a2.5,2.5,0,0,1,2.1,1.8c.8,3.9-3.5,14.9,1.1,17.7a2,2,0,0,0,2.7-.4c.8-1,1-2.7,2.1-3s.9,0,1,1.4c.4,3.9-1.4,9.5-6.7,7.6s-4.6-11.3-4.6-16.3c0-.3-.1-3.3-1.2-2.6Z" fill="#000" fill-rule="evenodd"></path><path d="M110,29.5a2.3,2.3,0,0,0-2.3-1.6c-2.6.2-3.1.1-5.6.2l-6.3.3c.4-3,.7-6,1-9,1-8.7,1-14.1.2-16.1s-1.7-2.1-3.2-1.8-2.7,4.3-3,11.6a152,152,0,0,0,.8,16.1l-3.2.9a14.2,14.2,0,0,0-2.6,1c-.4.2-.5.6-.5,1.2a4.5,4.5,0,0,0,.5,2c.8,2,2.2,5,4,9.2l3.6,8.3c1.1,2.6,2.5,3.8,4.3,3.8a4.5,4.5,0,0,0,2.5-.6c.3-.4.1-1.2-.4-2.5a39.3,39.3,0,0,1-3.1-10.7c-.3-1.8-.4-5.3-.5-8.4,5.5-1.2,9.3-.9,12.4-1.7h.2c1.2-.7.5-.3.9-.8S110.2,30,110,29.5Zm-16.5,17-.2.2h-.2a6.6,6.6,0,0,0-.5-1c-.3-.6-1.5-5-1.6-5.1s-1.1-4.1-1.3-4.5a1.4,1.4,0,0,1,0-.7,1.1,1.1,0,0,1,.4-.6,4.8,4.8,0,0,1,1.4-.6h.2v.4l.2.8.3,2.2,1,6.1.3,2.4Z" fill="#000"></path><path d="M129.1,48.7c-3.4,4.2-8.2,8-13.6,6.5-3-1.1-5-4.1-6-7.8a22.7,22.7,0,0,1-.2-11c1.2-5.5,4.6-10.1,8.5-10.2,7.4.8,11.2,8.9,7.4,14.7-2.1,3.2-6.5,4.9-8.6,5.9s-1.4.5-1.3,2.1c.3,3.7,6.6,3.7,10.6-4.6.4-.7,2.9-4,4.5-3,3.4,2-.9,6.8-1.3,7.4Zm-15.5-5.2c4.4-1.4,8-5.3,8.4-7.4.6-3.9-5.5-7.3-7.7-.8-.6,1.6-.8,5.3-.7,8.2Z" fill="#000" fill-rule="evenodd"></path><path d="M158.9,34.1c-.3,3.3,4.7,20.6,1.1,20.9s-3.5.4-4-.8,1.5-10-.2-7.3c-.4.6-.3.7-.9,1.8-6,10.7-14.1,7.8-18.8-.8a35.8,35.8,0,0,1-3.6-20.2c1.3-12.4,6.6-28.6,19.1-25.9,9.8,2.1,3,15.2-.4,11.8C143.1-4.1,127,38.7,144.8,49c5.2,3,9.6-6.7,8.5-11s-.9-3.1-2.4-2.7-5.1,3.8-6.2,2.8-2.2-6.4.6-6.6,5.1.9,8.9-3.7,6.3-2.9,5.7,1.6c-.3,2-.9,3.1-1,4.7Z" fill="#000" fill-rule="evenodd"></path><path d="M181.8,27.7a16,16,0,0,0-10.1-3c-5.5.6-10.5,4.2-10,9.9.2,2.5.5,12.9,1.4,17.2a4.1,4.1,0,0,0,2.6,3.2,3.2,3.2,0,0,0,3.8-1.6c.9-2.1-.1-4-.6-5.8-1.1-3.6-1.5-8.6-1.8-11.7-.6-6.4,9-7.2,11.3-3.5-1.6,2.5.8,4.1,3.7,1.8s1.6-5-.3-6.5Z" fill="#000" fill-rule="evenodd"></path><path d="M195,55.5c13.4-2.2,18.5-23,1.9-30.1-17.2-5.6-18.1,33.5-1.9,30.1Zm-6-16.7c1.5-16.4,12.3-8.8,13.6,1.9S186.7,57.5,189,38.8Z" fill="#000" fill-rule="evenodd"></path><path d="M214.3,34.2c-2.1,4.6-1.2,23.2,8.4,14.4,2-1.9,2.3-8.1,1.5-13.4-.2-1.2-1.2-4.9-1.5-6s.7-3.4,2.5-4a3.1,3.1,0,0,1,3.7,1.8c1,2.4.4,6.3.3,7.9-.4,4.7-1.1,10.6.6,13.7.7,1.3,1.7,1.4,1.7,2.4.2,3.5-4,5.8-5.6,3.6-.4-.6-.1-1.5-.7-2-7.9,7.1-16.6,1.6-16.5-8.6.1-2.2-.3-5.8.6-9s1-4.7,2.2-6,2.6-.5,3.1-.1.3,3.6-.3,5.3Z" fill="#000" fill-rule="evenodd"></path><path d="M249.6,50c1.4-4.8,3-12.6,2-15.5S244,28.6,241,33c-1.8,2.8-1.8,12.5.5,18.2.5,1.3-.5,3.2-2.2,3.8-6.6,2.2-1.5-16.1-5.4-21.9-.8-1.3-1.8-1.4-1.9-2.4-.4-3.3,3.6-5.5,5.3-3.4.5.6.2,1.5.9,1.9,7.3-6.7,18.2-1.7,18.9,8A40.6,40.6,0,0,1,254.5,52a10.3,10.3,0,0,1-1.7,3,2.2,2.2,0,0,1-3.1.1c-1.2-.9-.6-3.5-.1-5.1Z" fill="#000" fill-rule="evenodd"></path><path d="M278.7,28.7c.6-5.2-1.6-20.5-5.6-20.8-1.1-.1-1.4-2.8-.6-4.4s2.4-2,5.3-.8c4.7,1.9,5,19.3,5.1,24.6s-.1,11.3.7,16.1a20.3,20.3,0,0,0,1.3,4.5c.8,1.9,1.7,3.2,1.1,4.3s-4.8,3.3-6,2.1a7,7,0,0,1-1.4-4c-7,11.1-18,2.4-19.5-8.2s7.8-22.2,19.6-13.4ZM267.8,49.1c8.7,6.3,11.5-10.1,7.1-16.1s-18.8,7-7.1,16.1Z" fill="#000" fill-rule="evenodd"></path><path d="M13.2,45.3C6.4,43.1,1.5,36.5.4,29.6-2.9,10.4,17.4-6.9,37.8,2.7,38,7,36,13.2,30.5,15,57.8,32.2,34.5,67.3,6,55.8c-5.2-2.7-2.4-7.5,3.1-4.7s14.3,2.1,19.4-.7A22.7,22.7,0,0,0,36.8,43a28.5,28.5,0,0,0,1.9-3.6c.5-1,1.8-5.2.8-5.6s-.4.2-.5.5a19.2,19.2,0,0,1-3.9,7.3,19.5,19.5,0,0,1-8.4,5.8c-4.1,1.4-8.8,1.6-15.3.2a23.1,23.1,0,0,0,1.8-2.3ZM32,4.5s.1.7.2,1.8a9.1,9.1,0,0,1-3,7.5l-1.6,1.4c7.7,4.8,11.7,15.3,7.3,22.6-6.1,9.8-18,7.6-24.5.8s-5.9-16.1-1-22.9A28,28,0,0,1,32,4.5Z" fill="#97ca4f" fill-rule="evenodd"></path><path d="M8.8,26c1.5-14.6,18.3-17.4,24.5,2S6.5,43.7,8.8,26Zm13.7,9.6c13.3.5,6.9-13-1.8-16s-13.4,16,1.8,16Z" fill="#000" fill-rule="evenodd"></path></svg>

所以基本上你會問，Base64 vs SVG vs Image vs CssImage

首先，Base64和CssImage與普通圖像沒有太大區別，唯一的區別是普通圖像數據存儲在. png或。jpeg文件，而base64和CssImage是html中的一組文本，總之它們是一樣的，只是一組像素數據，有兩種主要的圖像類別。

像素圖像(Base64、圖像、CSS圖像) 矢量圖像(SVG) 如你所知，有HtmlSVG，你可以直接在html文件中看到SVG代碼。(查看本網站https://www.w3schools.com/graphics/svg_inhtml.asp片段)

矢量圖像是數學定義的，因此它們通常(90%的時間)非常小，因此你的網站加載速度更快，消耗的數據更少，并且它們產生清晰的圖像，所以只要你可以使用svg，就使用它。 SVG最適合用于徽標和極其簡單的圖像，所以回答您的問題:

是的，有很多工具可以用來制作SVG，你可以使用免費的inkscape(我個人使用Inkscape ),或者你可以使用Adobe Illustrator，這個網站有一個矢量圖像工具列表https://windowsreport.com/vector-graphics-software/#:~:text = Adobe % 20 Illustrator % 20 Adobe % 20 Illustrator % 20 is % 20 most % 20受歡迎，它提供% 20a % 20 wide % 20 range % 20 of % 20 advanced % 20特性。

Svg是它自己的東西，它不是css的一部分，但它與css一起工作，人們在web開發的其他事情中使用svg，svg可以用來定義3d打印機的工具路徑，所以SVG本身就是一個大東西。

如果你使用的是CssImage或者Base64代碼，唯一的好處就是所有的東西都在一個大的html文件中，但是請注意，這可能會導致你的網頁加載緩慢，因為html文件本身很大，你有一個完整的圖像在里面，在大的項目中把圖像和html代碼分開是有利的，對于小的項目你可以繼續。SVG是一種不同的野獸，在適當的領域使用時具有巨大的優勢。

最好的方法，我會說盡可能使用SVG，如果你必須使用圖像，不要使用css或嵌入式base64圖像，請注意，我是從你的項目將隨著時間的推移而擴展的角度來說的，也許你的網站服務于10000多個用戶。

使用圖像文件很簡單，你雇傭的任何新開發人員都可以很容易地閱讀你的代碼并理解發生了什么。 Base64和Cssimage需要大量的文本，這意味著如果我滾動你的html來修改你的網站，我已經滾動了所有的文本，把它放在一個單獨的文件中更方便....比如圖像文件。 這不是css和html屬性的目的，css應該是設計html的樣式而不是定義圖像，因此css是為設計html而不是定義圖像而創建和優化的，html標簽也是如此，它們定義網頁的結構，而不是定義圖像，所以為了使用它們，我建議你使用普通的圖像文件和SVG文件，而不是將其嵌入到HTML和CSS文件中。 是的，最近許多網站正在使用SVG標志，SVG圖標的高品質的目的，你可以調整到任何大小，沒有任何損害的形象。

所以嘗試用SVG代替圖片。

例如，一些流行的免費SVG下載網站:

https://www.freepik.com/free-photos-vectors/free-svg https://pixabay.com/images/search/svg/

另外，如果你想把你的圖片轉換成CSS，試試一些在線工具。 像圖像到CSS在線轉換器，你可以把你的圖像轉換成CSS和Basecode64。