如何将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>

我想知道是否有可能在css文件中以xml的形式（不创建seprate文件）？

Answer 1

如果跳过 ;base64您可以使用以％xx十六进制值编码的url-safe ASCII提供数据;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都必须执行此代码。