如何將svg + xml編碼到css樣式文件中並將其編碼到base64中？

Question

目前我有類似：

background:url(data:image/svg+xml; 
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNTZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NWI2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 

哪個解碼會是什麼樣子：

<?xml version="1.0" ?> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> 
    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"> 
    <stop offset="0%" stop-color="#6356ff" stop-opacity="1"/> 
    <stop offset="100%" stop-color="#75b6ff" stop-opacity="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /> 
</svg> 

不知是否是某種possiple有它在CSS文件中的XML的形式（沒有創造seprate文件）？

Answer 1

您可以在網址安全ASCII提供您的數據，與XX％的十六進制值編碼，如果你跳過;base64

嘗試......

background:url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3ClinearGradient%20id%3D%22grad-ucgg-generated%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%236356ff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2375b6ff%22%20stop-opacity%3D%221%22%2F%3E%0A%20%20%3C%2FlinearGradient%3E%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23grad-ucgg-generated)%22%20%2F%3E%0A%3C%2Fsvg%3E); 

Answer 2

我想你的唯一途徑會得到這樣的東西，如果你預處理你的CSS。這是一個用PHP來完成的簡單方法。首先，您需要重命名您的CSS文件，以便PHP能夠處理它。將.php附加到文件名中，以便將其命名爲style.css.php。然後，您可以在該文件中使用此代碼：

<?php 
$str = <<<EOS 
<?xml version="1.0" ?> 
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"> 
    <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"> 
    <stop offset="0%" stop-color="#6356ff" stop-opacity="1"/> 
    <stop offset="100%" stop-color="#75b6ff" stop-opacity="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" /> 
</svg> 
EOS; 
$b64 = base64_encode($str); 
?> 

.element { 
    background:url(data:image/svg+xml;base64,<?php echo $b64 ?>); 
} 

然後，更新您的HTML以指向新文件名。一旦你這樣做，它應該只是工作。您將承擔一些額外的處理開銷，因爲每次加載CSS文件時，PHP都必須執行此代碼。