注入SVG的目的是什麼？

我目前工作的一個網站正在使用這個庫頗有幾分注入SVGs到每個網頁客戶端： https://github.com/iconic/SVGInjector 注入SVG的目的是什麼？

本網站大多數頁面包括作爲圖標15個+ SVG圖標和我試圖儘量減少注入不能補救的請求數量。

我正在考慮將這些SVG作爲內聯元素來減少每個頁面上的HTTP請求數量，但我不明白注入的目的是什麼，只是將它們內聯到一開始。我錯過了什麼？

謝謝！

來源

2017-10-09 Vecta

他們似乎在[這裏]（https://github.com/iconic/SVGInjector#why）提出他們的論點。 – Nick

使用內聯SVG是必要的因爲某些原因庫自述中提到：

使用嵌入的JavaScript
如果能夠使用CSS

在另一方面樣式它，使用內聯SVG對其他[有爭議的]原因是不好的：

如果你需要使用同樣的SVG兩次，你n包括它兩次。一般來說，重複代碼並不好，因爲它往往會導致錯誤。
源文件中的SVG產生膨脹。在另一個文件中分離SVG源會更好。

您提到的庫通過允許您將SVG存儲在不同的文件中，但能夠以內聯方式使用它們來解決這些問題。

來源

2017-10-09 20:43:01 nicooga

謝謝。我目前正在努力提高這些頁面的性能，並且他們通常會有很多請求。這些SVG每頁使用一次。值得考慮內聯嗎？還是會增加任何性能可以忽略不計？ – Vecta

CSV ??。你的意思是SVG !. – sbr

如果你的網站使用了一些像webpack這樣的構建系統，我會考慮使用一個插件，它和庫在運行時做的一樣，但是在構建時，就像這個https://github.com/webpack-contrib/svg-inline-裝載機。另外，如果您使用[應用程序緩存]（https://www.google.com.ar/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&ved=0ahUKEwji-t_CtuTWAhUDfpAKHbVcCEIQFggwMAI&url=https%3A%2F%2F開發者。 mozilla.org％2Fen％2Fdocs％2FWeb％2FHTML％2FUsing_the_application_cache＆usg = AOvVaw2944I56oWAVsgEJQfUxO5i），內聯資產（如SVG和其他圖像）的[可能]性能提升消失。 – nicooga

注入SVG的目的是什麼？

回答

相關問題