Làm thế nào để đưa svg + xml vào tài liệu kiểu css với mã hóa nó thành base64?

Question

hiện tại tôi có một cái gì đó như:

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

nào giải mã sẽ trông như thế:

<?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> 

Tôi tự hỏi nếu nó là bằng cách nào đó possiple để có nó ở dạng xml bên trong tài liệu css (không tạo ra tập tin seprate)?

Answer 1

Bạn có thể cung cấp dữ liệu của bạn trong ASCII url-an toàn, mã hóa với giá trị hex% xx, nếu bạn skip;base64

Hãy thử này ...

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

Tôi nghĩ rằng cách duy nhất bạn sẽ nhận được một cái gì đó như thế này là nếu bạn tiền xử lý CSS của bạn. Đây là một cách đơn giản để làm điều đó với PHP. Trước tiên, bạn cần phải đổi tên tệp CSS của bạn để PHP sẽ xử lý nó. Thêm .php vào tên tệp, để tên được đặt tên là style.css.php. Sau đó, bạn có thể sử dụng mã này trong tệp đó:

<?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 ?>); 
} 

Sau đó, cập nhật HTML của bạn để trỏ đến tên tệp mới. Một khi bạn làm điều đó, nó sẽ chỉ hoạt động. Bạn sẽ phải chịu một số chi phí xử lý bổ sung, vì PHP sẽ phải thực thi mã này mỗi khi tệp CSS của bạn được tải.