在網(wǎng)站建設(shè)中使用SVG是非常棒：它們很小，可以在任何規(guī)模上看起來都很清晰，并且可以自定義而無需創(chuàng)建單獨(dú)的文件。但是，今天我感覺Web標(biāo)準(zhǔn)中缺少一些東西：一種將它們包含為外部文件的方法，該文件也保留了格式的自定義功能。

例如，假設(shè)您要使用存儲(chǔ)為的網(wǎng)站徽標(biāo)web-logo.svg。你可以做：<img src="/images/logo.svg" />。如果您的徽標(biāo)到處都是一樣的話，那很好。但是在許多情況下，您會(huì)使用2-3個(gè)相同徽標(biāo)的變體。例如，Slack有兩個(gè)版本。

為了解決這個(gè)問題，我創(chuàng)建了一個(gè)名為svg-loader的庫。簡而言之，它通過XHR提取SVG文件并將其作為內(nèi)聯(lián)元素加載，從而使您可以自定義諸如fill和的屬性stroke，就像內(nèi)聯(lián)SVG一樣。例如，我在副項(xiàng)目SVGBox上有一個(gè)徽標(biāo)。不用為每個(gè)變體創(chuàng)建一個(gè)不同的文件，我可以擁有一個(gè)文件并自定義填充顏色：

我曾經(jīng)data-src設(shè)置SVG文件的URL。該fill屬性將覆蓋fill原始SVG文件。要使用該庫，我唯一要確保的是提供的文件具有適當(dāng)?shù)腃ORS標(biāo)頭，以使XHR成功。該庫還在本地緩存文件，從而使后續(xù)操作更快。即使是第一次加載，其性能也可以與使用<img>標(biāo)簽相媲美。

這個(gè)概念并不新鮮。svg-inject做類似的事情。但是，svg-loader更易于使用，因?yàn)槲覀冎恍枰诖a中的某個(gè)地方（通過<script>標(biāo)簽或JavaScript包）包含庫即可。不需要額外的代碼。