CODEWITHSUNDEEP
htmlcssxmlsvg
myWallJSON
myWallJSON

Reputation: 9502

How to put svg+xml into css style document with out encoding it into base64?

currently I have something like:

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

Which decoded would look like:

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

I wonder if it is somehow possiple to have it in form of xml inside css document (not creating seprate file)?

Upvotes: 5

Views: 8439

Answers (2)

Chad von Nau
Chad von Nau

Reputation: 4404

I think the only way you will get something like this is if you preprocess your CSS. Here's a simple way to do it with PHP. First, you need to rename your CSS file so that PHP will process it. Append .php to the filename, so that it's named something like style.css.php. Then you can use this code in that file:

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

Then, update your HTML to point to the new filename. Once you do that, it should just work. You'll be incurring some additional processing overhead, because PHP will have to execute this code every time your CSS file is loaded.

Upvotes: 2

Xyz
Xyz

Reputation: 6013

You can supply your data in url-safe ASCII, encoded with %xx hex values, if you skip ;base64

Try this...

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

Upvotes: 7

Related Questions