embeding SVG into css - html
i want to converse this code
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 44.2 42.7" enable-background="new 0 0 44.2 42.7" xml:space="preserve">
<g>
<g>
<path fill="#FFFFFF" d="M20.1,20.7c0.5-0.2,0.9-0.4,1.2-0.7c0.6-0.6,0.9-1.3,0.9-2.1c0-1.1-0.3-1.9-1-2.5c-0.7-0.7-1.6-1-2.6-1
h-6.3v13.6h6.3c1.3,0,2.2-0.3,2.9-1c0.8-0.8,1.2-1.8,1.2-2.9c0-1-0.3-1.7-1-2.4C21.3,21.2,20.8,20.9,20.1,20.7z M14.1,15.8h4.4
c0.5,0,0.9,0.2,1.2,0.5c0.4,0.4,0.6,0.9,0.6,1.5c0,0.7-0.2,1.2-0.6,1.7c-0.4,0.4-0.8,0.6-1.3,0.6h-4.3V15.8z M20,25.7
c-0.4,0.4-1,0.6-1.8,0.6h-4v-4.8h4c0.8,0,1.4,0.2,1.9,0.7c0.4,0.4,0.6,1,0.6,1.7C20.7,24.7,20.4,25.2,20,25.7z"/>
<path fill="#FFFFFF" d="M30.7,26.1c-0.3,0.3-0.8,0.5-1.6,0.5c-0.7,0-1.3-0.2-1.8-0.7c-0.5-0.5-0.8-1.3-0.8-2.5H33
c0-1.5-0.4-2.7-1.1-3.4c-0.8-0.8-1.7-1.2-2.9-1.2c-1.2,0-2.1,0.4-2.9,1.1c-0.9,0.9-1.3,2.1-1.3,3.5s0.4,2.6,1.3,3.4
c0.8,0.8,1.8,1.2,3.1,1.2c1.2,0,2.2-0.3,2.9-1c0.5-0.5,0.8-1.2,1-2.1h-1.7C31.3,25.3,31.1,25.7,30.7,26.1z M27.3,20.8
c0.4-0.4,1-0.6,1.6-0.6c0.7,0,1.2,0.2,1.6,0.6c0.4,0.4,0.6,0.9,0.6,1.4h-4.5C26.7,21.6,27,21.2,27.3,20.8z"/>
<path fill="#FFFFFF" d="M30.5,20.7c-0.4-0.4-0.9-0.6-1.6-0.6c-0.6,0-1.2,0.2-1.6,0.6c-0.4,0.4-0.6,0.8-0.7,1.3h4.5
C31.1,21.6,30.9,21.1,30.5,20.7z"/>
<path fill="#FFFFFF" d="M19.7,19.4c0.4-0.4,0.6-1,0.6-1.7c0-0.6-0.2-1.1-0.6-1.5c-0.3-0.3-0.7-0.5-1.2-0.5h-4.4V20h4.3
C18.9,20,19.3,19.8,19.7,19.4z"/>
<path fill="#FFFFFF" d="M18.1,21.5h-4v4.8h4c0.8,0,1.4-0.2,1.8-0.6c0.5-0.5,0.7-1.1,0.7-1.7c0-0.7-0.2-1.3-0.6-1.7
C19.6,21.7,18.9,21.5,18.1,21.5z"/>
<path fill="#FFFFFF" d="M22.1,3C12,3,3.9,11.2,3.9,21.3c0,10.1,8.2,18.3,18.3,18.3s18.2-8.2,18.2-18.3C40.4,11.2,32.2,3,22.1,3z
M25.5,17.2H32v0.7h-6.5V17.2z M21.4,26.9c-0.6,0.6-1.6,1-2.9,1h-6.3V14.3h6.3c1.1,0,1.9,0.3,2.6,1c0.6,0.6,1,1.5,1,2.5
c0,0.8-0.3,1.6-0.9,2.1c-0.3,0.3-0.7,0.6-1.2,0.7c0.6,0.2,1.1,0.5,1.5,0.9c0.6,0.6,1,1.4,1,2.4C22.6,25.1,22.2,26.1,21.4,26.9z
M32,27c-0.7,0.7-1.6,1-2.9,1c-1.3,0-2.3-0.4-3.1-1.2c-0.8-0.8-1.3-2-1.3-3.4s0.4-2.6,1.3-3.5c0.7-0.7,1.7-1.1,2.9-1.1
c1.1,0,2.1,0.4,2.9,1.2c0.7,0.7,1.1,1.9,1.1,3.4h-6.4c0,1.1,0.3,1.9,0.8,2.5c0.5,0.5,1.1,0.7,1.8,0.7c0.7,0,1.3-0.2,1.6-0.5
c0.4-0.4,0.6-0.8,0.6-1.3H33C32.8,25.8,32.5,26.5,32,27z"/>
<rect x="25.5" y="17.2" fill="#FFFFFF" width="6.5" height="0.7"/>
</g>
</g>
</svg>
to something like this
data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGlkPSJkcmliYmJsZS1jaXJjbGUtaWNvbiIgZmlsbD0iI0ZGRkZGRiIgZD0iTTE3LjM2MywxNy42MDRjMC44MzQsMi4xOCwxLjQ0Nyw0LjQyLDEuODM4LDYuNzE1DQoJYy0wLjk5NiwwLjM4Ni0yLjA3MiwwLjYwNC0zLjIwMSwwLjYwNGMtMi4wNjQsMC0zLjk2Mi0wLjcxMS01LjQ3Ni0xLjg5NEMxMi4yOTcsMjAuMjUsMTQuNTU5LDE4LjQ0MSwxNy4zNjMsMTcuNjA0eiBNMTEuOTc1LDguMDQ5DQoJYy0yLjI5MSwxLjE2NS00LjAxLDMuMjg2LTQuNjMzLDUuODM4YzMuMDE4LTAuMDIxLDUuNjI5LTAuMzUyLDcuODE2LTAuOTk2QzE0LjIzNCwxMS4yMzIsMTMuMTczLDkuNjE3LDExLjk3NSw4LjA0OXogTTIxLjQzOCw4Ljk0Mw0KCUMxOS45MzIsNy43NzksMTguMDQ4LDcuMDc4LDE2LDcuMDc4Yy0wLjc1NiwwLTEuNDg3LDAuMTA1LTIuMTg4LDAuMjgzYzEuMTgsMS41ODUsMi4yMjUsMy4yMTksMy4xNCw0Ljg5NA0KCUMxOC44NTcsMTEuNDQ4LDIwLjM1NCwxMC4zNDEsMjEuNDM4LDguOTQzeiBNMTYuNjQ2LDE1Ljg2OGMtMC4xOTEtMC40MzItMC4zOTQtMC44NjEtMC42MDQtMS4yODkNCgljLTIuNTAzLDAuNzg3LTUuNDkyLDEuMTg1LTguOTU1LDEuMTljMCwwLjA3OC0wLjAxLDAuMTUzLTAuMDEsMC4yMzFjMCwyLjE2NiwwLjc3OCw0LjE1NCwyLjA2Niw1LjcwMQ0KCUMxMS4xLDE4Ljc2OCwxMy42MDYsMTYuODE4LDE2LjY0NiwxNS44Njh6IE0xOS4yMjUsMTcuMjA5YzAuNzU2LDIuMDIsMS4zMzQsNC4wOSwxLjcyOSw2LjIwN2MyLjAyNC0xLjM1NywzLjQ1OC0zLjUyMywzLjg1My02LjAzMQ0KCUMyMi43NzEsMTcuMDMyLDIwLjkxMiwxNi45NzEsMTkuMjI1LDE3LjIwOXogTTMyLDE2YzAsOC44MzYtNy4xNjQsMTYtMTYsMTZTMCwyNC44MzYsMCwxNlM3LjE2NCwwLDE2LDBTMzIsNy4xNjQsMzIsMTZ6IE0yNi44LDE2DQoJYzAtNS45NjUtNC44MzUtMTAuOC0xMC44LTEwLjhTNS4yLDEwLjAzNSw1LjIsMTZTMTAuMDM1LDI2LjgsMTYsMjYuOFMyNi44LDIxLjk2NSwyNi44LDE2eiBNMTcuODE0LDEzLjkxOQ0KCWMwLjI0MiwwLjUsMC40NzEsMS4wMDUsMC42ODgsMS41MTJjMS45NDEtMC4zMzUsNC4wNzUtMC4zMTQsNi4zOTUsMC4wNjZjLTAuMTEyLTEuOTk1LTAuODc1LTMuODE3LTIuMDktNS4yNTENCglDMjEuNTYyLDExLjc5NiwxOS44OTMsMTMuMDIsMTcuODE0LDEzLjkxOXoiLz4NCjwvc3ZnPg0K
to embed it like this
footer ul .ins{
background-image:url("data:image/svg+xml;
charset=utf-8;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIyNDAgMjQwIDMyIDMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI0MCAyNDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggaWQ9Imluc3RhZ3JhbS1jaXJjbGUtaWNvbiIgZmlsbD0iI0ZGRkZGRiIgZD0iTTI2My42MDQsMjQ5LjAxNXYxLjk2NmMwLDAuMzE1LTAuMjU2LDAuNTcxLTAuNTcxLDAuNTcxaC0xLjkyNA0KCWMtMC4zMTUsMC0wLjU3LTAuMjU1LTAuNTctMC41NzF2LTEuOTY2YzAtMC4zMTUsMC4yNTUtMC41NzEsMC41Ny0wLjU3MWgxLjkyNEMyNjMuMzQ4LDI0OC40NDQsMjYzLjYwNCwyNDguNywyNjMuNjA0LDI0OS4wMTV6DQoJIE0yNTYuMjMzLDI1OC43MDRjMS40NDgsMCwyLjYyMi0xLjE3NCwyLjYyMi0yLjYyMmMwLTEuNDQ4LTEuMTc0LTIuNjIxLTIuNjIyLTIuNjIxcy0yLjYyMiwxLjE3My0yLjYyMiwyLjYyMQ0KCUMyNTMuNjExLDI1Ny41MywyNTQuNzg1LDI1OC43MDQsMjU2LjIzMywyNTguNzA0eiBNMjcyLDI1NmMwLDguODM3LTcuMTYzLDE2LTE2LDE2Yy04LjgzNiwwLTE2LTcuMTYzLTE2LTE2YzAtOC44MzYsNy4xNjQtMTYsMTYtMTYNCglDMjY0LjgzNywyNDAsMjcyLDI0Ny4xNjQsMjcyLDI1NnogTTI2NS4yMywyNTMuNDE2aC01LjI1N2MwLjUzNiwwLjc1MiwwLjg1MiwxLjY3MiwwLjg1MiwyLjY2NmMwLDIuNTQzLTIuMDYyLDQuNjA0LTQuNjA0LDQuNjA0DQoJcy00LjYwNC0yLjA2Mi00LjYwNC00LjYwNGMwLTAuOTk0LDAuMzE2LTEuOTE0LDAuODUyLTIuNjY2aC01LjIzM3Y4LjA2OWMwLDEuOTY1LDEuNTk0LDMuNTU5LDMuNTU5LDMuNTU5aDEwLjg3Ng0KCWMxLjk2NiwwLDMuNTYtMS41OTQsMy41Ni0zLjU1OVYyNTMuNDE2eiBNMjU2LjIyMSwyNTkuNjI5YzEuOTU3LDAsMy41NDctMS41OTEsMy41NDctMy41NDdjMC0xLjA2Mi0wLjQ3LTIuMDE1LTEuMjEyLTIuNjY2DQoJYy0wLjI2LTAuMjI4LTAuNTU0LTAuNDE5LTAuODcyLTAuNTY0Yy0wLjQ0Ni0wLjIwMy0wLjk0MS0wLjMxNy0xLjQ2My0wLjMxN2MtMC41MjEsMC0xLjAxNywwLjExNC0xLjQ2MywwLjMxNw0KCWMtMC4zMTksMC4xNDUtMC42MTIsMC4zMzYtMC44NzMsMC41NjRjLTAuNzQyLDAuNjUtMS4yMTEsMS42MDQtMS4yMTEsMi42NjZDMjUyLjY3NCwyNTguMDM4LDI1NC4yNjYsMjU5LjYyOSwyNTYuMjIxLDI1OS42Mjl6DQoJIE0yNjUuMjMsMjUwLjUxNWMwLTEuOTY1LTEuNTk0LTMuNTU5LTMuNTYtMy41NTloLTkuNzI1djQuNDg3aC0wLjcyOXYtNC40ODdoLTAuNDIxYy0wLjAyOCwwLTAuMDU1LDAuMDAxLTAuMDgzLDAuMDAydjQuNDg1aC0wLjcyOQ0KCXYtNC4zOTNjLTAuMTc3LDAuMDQxLTAuMzQ5LDAuMDk1LTAuNTE0LDAuMTYydjQuMjNoLTAuNzI5di0zLjgzM2MtMC45MDksMC42NDUtMS41MDMsMS43MDUtMS41MDMsMi45MDR2Mi4zMzdoNS43MDUNCgljMC44MzUtMC44NDgsMS45OTYtMS4zNzQsMy4yOC0xLjM3NGMxLjI4NCwwLDIuNDQ1LDAuNTI2LDMuMjgsMS4zNzRoNS43MjlMMjY1LjIzLDI1MC41MTVMMjY1LjIzLDI1MC41MTV6Ii8+DQo8L3N2Zz4NCg==")
}
thank you
A couple of ways you can get the data url for this. One way is to use an online tool such as this:
http://www.mobilefish.com/services/base64/base64.php
Personally, though, my preference is to save the SVG in an app like Illustrator. I save it as a .svg file. Then place it into an image element like so:
<img src="/i/logo.svg" alt="logo">
If you open the page on which that image appears in Chrome, right click on the image and Inspect element. In the inspector, right click on the image URL and choose Open Link in Resources Panel. In the resources panel, right click on the image and choose Copy Image as Data URL.
Seems like a bit of a lengthy task, but I find that the most reliable way.
Related
local svg image not found when web page loaded
I have been trying to add an svg image to my django website for awhile now. However, I keep getting this error: GET http://localhost:8000/images/enter.svg 404 (Not Found) This is what I wrote <img src='/images/enter.svg'> and my folder structure is as such index.html - images -- enter.svg I've been googling around but I can't find a solution. I hear people copying and pasting the 'data' of the svg instead, but I haven't been able to find an example. Just in case it's actually useful, here's the data of the svg image I'm trying to attach to my page: <?xml version="1.0"?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'> <svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto"> <!--Unicode Character 'DOWNWARDS ARROW WITH CORNER LEFTWARDS' (U+21B5)--> <defs id="genericDefs" /> <g> <g> <path d="M159.3281 330.8906 L76.6406 330.8906 Q92.5312 348.75 99.4219 368.8594 L89.2969 368.8594 Q69.6094 340.1719 34.5938 327.375 L34.5938 320.4844 Q69.6094 307.6875 89.2969 279 L99.4219 279 Q92.5312 299.25 76.6406 317.1094 L145.4062 317.1094 L145.4062 215.7188 L159.3281 215.7188 L159.3281 330.8906 Z" stroke="none" /> </g> </g> </svg>
Hi your svg code didnt seem to work so i think if you put this piece of code in wherever you want you svg placed it should work: <svg width="124.73px" height="153.14px" viewBox="0 0 124.73 153.14"> <g> <g> <path d="M124.73,115.17H42.05c10.59,11.91,18.19,24.56,22.78,37.97H54.7C41.58,134.02,23.34,120.19,0,111.66v-6.89 c23.34-8.53,41.58-22.36,54.7-41.48h10.12c-4.59,13.5-12.19,26.2-22.78,38.11h68.77V0h13.92V115.17z"/> </g> </g> </svg> It ofcourse can be turned into an svg file and then linked into your code as you were trying. But you could also just put the code above into your code. example: <html> <body> <h1> some content or whatever </h1> <svg width="124.73px" height="153.14px" viewBox="0 0 124.73 153.14"> <g> <g> <path d="M124.73,115.17H42.05c10.59,11.91,18.19,24.56,22.78,37.97H54.7C41.58,134.02,23.34,120.19,0,111.66v-6.89 c23.34-8.53,41.58-22.36,54.7-41.48h10.12c-4.59,13.5-12.19,26.2-22.78,38.11h68.77V0h13.92V115.17z"/> </g> </g> </svg> </body> </html> like this it should show up on your page without having the linking problem. You can style your svg like this aswell now by giving your path an id. https://css-tricks.com/lodge/svg/ there are plenty tutorials on this page that helped me a lot with svg. Hope this works!
How to keep <image> xlink:href working after base64 encode
I am using SVG encoded as base64 to be displayed in my .html page.
I have been using basic shapes with fill, but now,
I am trying to use a SVG with a background image which is applied at the following line:
<image overflow="visible" width="650" height="882" xlink:href="<path>" transform="matrix(0.266 0 0 0.266 1.04 0)">
And below is the whole svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="175px" height="199.55px"
viewBox="0 0 175 199.55" enable-background="new 0 0 175 199.55" xml:space="preserve">
<metadata>
</metadata>
<g id="Capa_2">
</g>
<g id="Capa_1">
<g>
<defs>
<path id="svg_1" d="M78.854,4.932c5.764-3.328,11.528-3.328,17.292,0l69.168,39.934c5.764,3.328,8.646,8.32,8.646,14.976v79.867
c0,6.656-2.883,11.648-8.646,14.976l-69.168,39.935c-5.764,3.327-11.528,3.327-17.292,0L9.686,154.684
c-5.764-3.327-8.646-8.319-8.646-14.976V59.841c0-6.656,2.882-11.647,8.646-14.976L78.854,4.932z"/>
</defs>
<clipPath id="svg_1_1_">
<use xlink:href="#svg_1" overflow="visible"/>
</clipPath>
<g transform="matrix(1 0 0 1 6.741370e-008 0)" clip-path="url(#svg_1_1_)">
<image overflow="visible" width="650" height="882" xlink:href="/assets/img/hexagon/1b9a4fb722.jpg" transform="matrix(0.266 0 0 0.266 1.04 0)">
</image>
</g>
</g>
</g>
</svg>
Later, already encoded to base64, css will look like this:
/* file size: 1.9ko | optimized file size: 1.7ko | base64 size: 2.2ko */
.doubleduecemenu {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFs8IUVOVElUWSBuc19leHRlbmQgImh0dHA6Ly9ucy5hZG9iZS5jb20vRXh0ZW5zaWJpbGl0eS8xLjAvIj48IUVOVElUWSBuc19haSAiaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIj48IUVOVElUWSBuc19ncmFwaHMgImh0dHA6Ly9ucy5hZG9iZS5jb20vR3JhcGhzLzEuMC8iPjwhRU5USVRZIG5zX3ZhcnMgImh0dHA6Ly9ucy5hZG9iZS5jb20vVmFyaWFibGVzLzEuMC8iPjwhRU5USVRZIG5zX2ltcmVwICJodHRwOi8vbnMuYWRvYmUuY29tL0ltYWdlUmVwbGFjZW1lbnQvMS4wLyI+PCFFTlRJVFkgbnNfc2Z3ICJodHRwOi8vbnMuYWRvYmUuY29tL1NhdmVGb3JXZWIvMS4wLyI+PCFFTlRJVFkgbnNfY3VzdG9tICJodHRwOi8vbnMuYWRvYmUuY29tL0dlbmVyaWNDdXN0b21OYW1lc3BhY2UvMS4wLyI+PCFFTlRJVFkgbnNfYWRvYmVfeHBhdGggImh0dHA6Ly9ucy5hZG9iZS5jb20vWFBhdGgvMS4wLyI+XT48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM6eD0iJm5zX2V4dGVuZDsiIHhtbG5zOmk9IiZuc19haTsiIHhtbG5zOmdyYXBoPSImbnNfZ3JhcGhzOyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNzVweCIgaGVpZ2h0PSIxOTkuNTVweCIgdmlld0JveD0iMCAwIDE3NSAxOTkuNTUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3NSAxOTkuNTUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxtZXRhZGF0YT48L21ldGFkYXRhPjxnIGlkPSJDYXBhXzIiPjwvZz48ZyBpZD0iQ2FwYV8xIj48Zz48ZGVmcz48cGF0aCBpZD0ic3ZnXzEiIGQ9Ik03OC44NTQsNC45MzJjNS43NjQtMy4zMjgsMTEuNTI4LTMuMzI4LDE3LjI5MiwwbDY5LjE2OCwzOS45MzRjNS43NjQsMy4zMjgsOC42NDYsOC4zMiw4LjY0NiwxNC45NzZ2NzkuODY3YzAsNi42NTYtMi44ODMsMTEuNjQ4LTguNjQ2LDE0Ljk3NmwtNjkuMTY4LDM5LjkzNWMtNS43NjQsMy4zMjctMTEuNTI4LDMuMzI3LTE3LjI5MiwwTDkuNjg2LDE1NC42ODRjLTUuNzY0LTMuMzI3LTguNjQ2LTguMzE5LTguNjQ2LTE0Ljk3NlY1OS44NDFjMC02LjY1NiwyLjg4Mi0xMS42NDcsOC42NDYtMTQuOTc2TDc4Ljg1NCw0LjkzMnoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJzdmdfMV8xXyI+PHVzZSB4bGluazpocmVmPSIjc3ZnXzEiICBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSA2Ljc0MTM3MGUtMDA4IDApIiBjbGlwLXBhdGg9InVybCgjc3ZnXzFfMV8pIj48aW1hZ2Ugb3ZlcmZsb3c9InZpc2libGUiIHdpZHRoPSI2NTAiIGhlaWdodD0iODgyIiB4bGluazpocmVmPSJodHRwOi8vZGwxLmpveGkubmV0L2RyaXZlLzIwMTYvMDYvMjUvMDAxNC8xMDkxLzk1MTM2My82My8xYjlhNGZiNzIyLmpwZyIgIHRyYW5zZm9ybT0ibWF0cml4KDAuMjY2IDAgMCAwLjI2NiAxLjA0IDApIj48L2ltYWdlPjwvZz48L2c+PC9nPjwvc3ZnPg==);
}
Problem:
Encoded base64 does not find the image that I used in the SVG.
Considerations
SVG as html works perfectly
Tried to use the image from the local server and from a hosting url
Tried to encode the path in the svg <image> to base64
I would accept any tip, and yet a solution that involves the use of svg without encoding it, however, I prefer to avoid it as far as possible.
Yet, That's how it is supposed to look like:
Thank you!
I do appreciate your time reading and thinking on this issue.
If SVG is used in an image context i.e. via an html <img> tag or as a CSS background image then it must be complete in a single file, otherwise you have a privacy leak. If you change the image in the SVG into an internal data URL you'll find it works in Chrome and Firefox. If you imagine that the capabilities of SVG as an image are similar to raster images you won't go far wrong, after all raster images consist of a single file. Once you've done that you can then turn the SVG file itself into the data URL just as you do now.
SVG image embedded in web page doesn't show
I'm trying to embed a set of SVG images in a blank web page.
<html><head></head>
<body>
<img width="117px" src="img/icone/phone_hex034F84.svg" alt="image">
<img width="320px" src="img/illustrazioni/SHIPPER3.svg" alt="image">
</body>
</html>
Both files are self-contained svg generated by Illustrator.
While the first does render in the browser the second (SHIPPER3.svg) doesn't.
See the code: http://104.155.112.173/land/img/illustrazioni/SHIPPER3.svg
You can download the full source from the previous link as I cannot embed it in the question (too large). Although, I'll embed here just the preamble.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="_x5B_SHIPPER1_x5D_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 733.3 587.8" style="enable-background:new 0 0 733.3 587.8;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
.st1{fill:#EDEDED;}
.st2{fill:#F2F2F2;}
If I copy and paste SHIPPER3.svg in http://www.freecodeformat.com/svg-editor.php it does render. I can also open it in Sketch with no problems.
I tried to embed SHIPPER3.svg also as inline svg but same, again, no show.
What I am missing?
Several problems in your SHIPPER3.svg:
all your top-level groups has class st0 which is said to be clipped out by clipPath that is outside entire viewBox
clipPath #SVGID_2_ has style="display:none;" what also hides it
See:
<svg version="1.1" viewBox="0 0 733.3 587.8">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
/* ... */
</style>
<defs>
<ellipse id="SVGID_1_" cx="1085.6" cy="279.3" rx="251.8" ry="233.4"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="display:none;overflow:visible;"/>
</clipPath>
<g class="st0">
<!-- ... -->
</g>
</svg>
Further to a comment I left above, you may wish to replace the <clippath id='SVGID_2_' element with the following: <clipPath xmlns="http://www.w3.org/2000/svg" id="SVGID_2_"> <ellipse xmlns="http://www.w3.org/2000/svg" id="SVGID_1_" cx="360" cy="290" rx="325" ry="260"/> </clipPath> This does 2 things. (0) it removes the link to the SVGID_1_ element by inserting the data that was inside it directly. (1) repositions and sizes the ellipse
SVG symbol currently not displaying in chrome
I've been having problems with symbols in SVG files. They are currently not displaying in browsers. For example I created this basic SVG file in inkscape to show the problem: <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100" width="100" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" xmlns:dc="http://purl.org/dc/elements/1.1/"> <defs> <symbol id="circle"> <circle style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" stroke-width="3.257" stroke="#008000" cy="1000.1" cx="34.598" r="12.879"/> </symbol> </defs> <g transform="translate(0 -952.36)"> <use xlink:href="#circle"/> </g> </svg> And it should look like this: But for some reason its not displaying as such in chrome, does anyone know why?
You're drawing the initial symbol mostly outside the viewbox - your viewBox is 100 x 100, but your cy is 100.1. This seems to disable drawing completely, so when you bring it back into the viewbox with the translate, there's nothing there. Adjust your cy so you're drawing inside the viewbox and reduce your translate to compensate.
Svg with image inside is not showing in safari
Inside my website, I am embeding a few svgs. They all seem to work just fine in Chrome, Firefox, IE(9+) and in Safari. Howvere as soon as there is image included in the svg, safari does not render the image. Based on the previous similar topic I have tried the following: SVG <image> elements not displaying in Safari - enclosing <use> tag like this <use></use> SVG Image dosen't appear in Safari - I dont find this very usefull,cause this is deleting aprt of the svg. Not able to render SVG image in Safari - Added <meta http-equiv="Content-Type" content="application/xhtml+xml"> in header. And beyond that, I dont really know what else to try. Maybe one more interesting thing to note is that inside my page, image is not displayed, but I can open svg file in safari(just the file) and it will be renderd correctly. Further more, after it's opened in the browser as a file, it renders inside the page as well. And I embed the svg to the page with img tag. <img src="mysvg.svg" class="center-block"/> This is my svg: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve"> <g> <defs> <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414 "/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"></use> </clipPath> <g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)"> <g id="DSC_x5F_0112-2.psd_1_" enable-background="new "> <image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov .....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)"> </image> </g> </g> </g> <g> <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 L164,1.415L1.414,164.002z"/> </g> </svg> I have reduced base64 image string, to shorten the code. Full svg can be found here. UPDATE: Just to be clear, svg shows in the browser(safari) but image is missing (I can see just border).
It looks like this WebKit bug is responsible for the problem: https://bugs.webkit.org/show_bug.cgi?id=99677 The workaround we use in our application is to have a script which finds all img elements displaying SVG images and add hidden object elements loading the same SVGs (<object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object>). The reason it works is that the object tag properly loads the embedded images into the image cache, so that they are visible within the SVGs loaded using the img tags. The advantage of this approach is that the images are still displayed using the img tag, so that the workaround can be applied (and later removed cleanly when the browsers are eventually patched) without affecting the rest of the application/website. The disadvantage is the creation of an extra object tag for each SVG image.
This solution works for me when displaying an embedded SVG image in Safari. replace <img src="image.svg"> with <object data="image.svg" type="image/svg+xml"></object>
I ran into this problem where I was using Ajax to load the svg spritesheet onto the page. If I had a on the page before the spritesheet was loaded, it would fail and would not resolve once the spritesheet was avaialble. Any added to the dom after the spritesheet was loaded were fine. I had to delay putting the items in the dom until after the spritesheet finished loading. This only affected IOS. All other browsers didn't care about the order.
It seems that answer from this question works: What could make Safari skip clip-path AND mask with SVG?. See instructions in link from answer. You have to recreate your clip path to make it visible. And </clippath> tag is not pushed after </image> tag. Here is the little changed code (link to my image inserted so you will have to change it): <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve" > <g> <clipPath id="SVGID_2_"> <!--use xlink:href="#SVGID_1_" overflow="visible"></use--> <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414" /> </clipPath> <defs> <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414"/> </defs> </g> <image clip-path='url(#SVGID_2_)' overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="images/banner_03.jpg" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)"> </image> <g> <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 L164,1.415L1.414,164.002z"/> </g> </svg>
So Anto Jurković pointed out, there are some known issues with Safari and clipPath. What Safari likes is if you dont define polygon but put it straight in to clippPath. Also you must then group clipPath separately. But I still could not get svg to render the image if I used img tag for svg - <img src="svg"/>. So at the end I have embeded it like this: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve"> <g> <clipPath id="SVGID_2_"> <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414 "/> </clipPath> </g> <image clip-path="url(#SVGID_2_)" overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/.....r/fdeaS//9k="> </image> <g> <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585 L164,1.415L1.414,164.002z"/> </g> </svg> I can confirm that this renders correctly in mobile safari(on ipad and iphone, windows safari and mac safari - latest versions). So to sum it up...I have this svgs in separate html file and render them when needed.