Grunticon을 사용하여 SVG 이미지를 데이터 URI로 변환 할 때의 문제

Question

svg 및 png 이미지를 grunticon을 통해 데이터 uris로 변환 할 때 png에 대해 생성 된 코드가 제대로 작동하지만 svg 이미지가 렌더링되지 않습니다 (오류 : 실패 함 지정된 URL로드). 파일 경로가 잘못되어 무엇이 잘못되었을 수 있습니까?

SVG 파일 :

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

생성 된 데이터 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; } 

Answer 1

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

이 선언은 유효하지 않은 \i가 포함되어 있습니다. "으로 변경하면 "연필로 눈금자"아이콘이 표시됩니다. 다른 말로

, %5Ci 당신이 제공 할 수있는 코드 샘플