Search code examples
svggruntjsdata-uri

Issue in converting SVG images into Data URI using Grunticon


When I'm converting my svg and png images into data uris through grunticon, the code generated for pngs are working fine but the svg images are not getting rendered (Error:Failed to load the given URL). The path to the file is correct what could have gone wrong?

SVG file:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Expanded"><g><g><path d="M43,48H29c-0.553,0-1-0.448-1-1V1c0-0.552,0.447-1,1-1h14c0.553,0,1,0.448,1,1v46C44,47.552,43.553,48,43,48z M30,46h12     V2H30V46z"/></g><g><rect height="2" width="5" x="29" y="8"/></g><g><rect height="2" width="5" x="29" y="14"/></g><g><rect height="2" width="5" x="29" y="20"/></g><g><rect height="2" width="5" x="29" y="26"/></g><g><rect height="2" width="5" x="29" y="32"/></g><g><rect height="2" width="5" x="29" y="38"/></g><g><path d="M15,46h-4c-2.757,0-5-2.243-5-5V12c0-0.197,0.059-0.391,0.168-0.555l6-9c0.371-0.557,1.293-0.557,1.664,0l6,9     C19.941,11.609,20,11.803,20,12v29C20,43.757,17.757,46,15,46z M8,12.303V41c0,1.654,1.346,3,3,3h4c1.654,0,3-1.346,3-3V12.303     l-5-7.5L8,12.303z"/></g><g><path d="M19,40H7c-0.553,0-1-0.448-1-1s0.447-1,1-1h12c0.553,0,1,0.448,1,1S19.553,40,19,40z"/></g><g><path d="M19,36H7c-0.553,0-1-0.448-1-1s0.447-1,1-1h12c0.553,0,1,0.448,1,1S19.553,36,19,36z"/></g><g><path d="M11,36c-0.553,0-1-0.448-1-1V16c0-0.552,0.447-1,1-1s1,0.448,1,1v19C12,35.552,11.553,36,11,36z"/></g><g><path d="M15,36c-0.553,0-1-0.448-1-1V16c0-0.552,0.447-1,1-1s1,0.448,1,1v19C16,35.552,15.553,36,15,36z"/></g><g><rect height="2" width="6" x="10" y="7"/></g><g><path d="M10,17c-2.206,0-4-1.794-4-4c0-0.552,0.447-1,1-1s1,0.448,1,1c0,1.103,0.897,2,2,2s2-0.897,2-2c0-0.552,0.447-1,1-1     s1,0.448,1,1C14,15.206,12.206,17,10,17z"/></g><g><path d="M16,17c-2.206,0-4-1.794-4-4c0-0.552,0.447-1,1-1s1,0.448,1,1c0,1.103,0.897,2,2,2s2-0.897,2-2c0-0.552,0.447-1,1-1     s1,0.448,1,1C20,15.206,18.206,17,16,17z"/></g></g></g></svg>

Generated Data uri:

.icon-1 { background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3C!DOCTYPE%20svg%20%20PUBLIC%20%5Ci-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%5Ci%20%20%5Cihttp%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%5Ci%3E%3Csvg%20enable-background%3D%22new%200%200%2048%2048%22%20height%3D%2248px%22%20version%3D%221.1%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248px%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22Expanded%22%3E%3Cg%3E%3Cg%3E%3Cpath%20d%3D%22M43%2C48H29c-0.553%2C0-1-0.448-1-1V1c0-0.552%2C0.447-1%2C1-1h14c0.553%2C0%2C1%2C0.448%2C1%2C1v46C44%2C47.552%2C43.553%2C48%2C43%2C48z%20M30%2C46h12%20%20%20%20%20V2H30V46z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%228%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2214%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2220%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2226%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2232%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%225%22%20x%3D%2229%22%20y%3D%2238%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M15%2C46h-4c-2.757%2C0-5-2.243-5-5V12c0-0.197%2C0.059-0.391%2C0.168-0.555l6-9c0.371-0.557%2C1.293-0.557%2C1.664%2C0l6%2C9%20%20%20%20%20C19.941%2C11.609%2C20%2C11.803%2C20%2C12v29C20%2C43.757%2C17.757%2C46%2C15%2C46z%20M8%2C12.303V41c0%2C1.654%2C1.346%2C3%2C3%2C3h4c1.654%2C0%2C3-1.346%2C3-3V12.303%20%20%20%20%20l-5-7.5L8%2C12.303z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C40H7c-0.553%2C0-1-0.448-1-1s0.447-1%2C1-1h12c0.553%2C0%2C1%2C0.448%2C1%2C1S19.553%2C40%2C19%2C40z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C36H7c-0.553%2C0-1-0.448-1-1s0.447-1%2C1-1h12c0.553%2C0%2C1%2C0.448%2C1%2C1S19.553%2C36%2C19%2C36z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M11%2C36c-0.553%2C0-1-0.448-1-1V16c0-0.552%2C0.447-1%2C1-1s1%2C0.448%2C1%2C1v19C12%2C35.552%2C11.553%2C36%2C11%2C36z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M15%2C36c-0.553%2C0-1-0.448-1-1V16c0-0.552%2C0.447-1%2C1-1s1%2C0.448%2C1%2C1v19C16%2C35.552%2C15.553%2C36%2C15%2C36z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Crect%20height%3D%222%22%20width%3D%226%22%20x%3D%2210%22%20y%3D%227%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M10%2C17c-2.206%2C0-4-1.794-4-4c0-0.552%2C0.447-1%2C1-1s1%2C0.448%2C1%2C1c0%2C1.103%2C0.897%2C2%2C2%2C2s2-0.897%2C2-2c0-0.552%2C0.447-1%2C1-1%20%20%20%20%20s1%2C0.448%2C1%2C1C14%2C15.206%2C12.206%2C17%2C10%2C17z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M16%2C17c-2.206%2C0-4-1.794-4-4c0-0.552%2C0.447-1%2C1-1s1%2C0.448%2C1%2C1c0%2C1.103%2C0.897%2C2%2C2%2C2s2-0.897%2C2-2c0-0.552%2C0.447-1%2C1-1%20%20%20%20%20s1%2C0.448%2C1%2C1C20%2C15.206%2C18.206%2C17%2C16%2C17z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; }

Solution

  • <!DOCTYPE svg PUBLIC \i-//W3C//DTD SVG 1.1//EN\i \ihttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\i>

    This declaration contains \i which isn't valid. Change to " and you'll get the "pencil with ruler" icon.

    In another words, change %5Ci to %22