I have an svg which when opened in any browser comes up fine. I am trying to convert a bunch of them to font icons using http://icomoon.io/ but it's not coming up correctly after importing. I tried using http://fontastic.me/ as well but no luck.
Here is the SVG Image markup -
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
color: red;
">
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M323.41,321.664c0,0.457-0.371,0.828-0.828,0.828 H88.835c-0.458,0-0.829-0.371-0.829-0.828V87.918c0-0.459,0.371-0.829,0.829-0.829h233.747c0.457,0,0.828,0.37,0.828,0.829V321.664z " style="
color: red;
"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M215.311,196.935"/>
<path fill="none" stroke="#231F20" stroke-width="15" stroke-miterlimit="10" d="M250.935,277.399 c25.36-14.769,42.409-42.247,42.409-73.71c0-47.078-38.164-85.242-85.242-85.242s-85.242,38.164-85.242,85.242 c0,31.463,17.048,58.941,42.408,73.71"/>
<g>
<path fill="#231F20" d="M173.653,282.14l-4.741-48.439c-0.059-0.58-0.327-1.092-0.715-1.482l-47.088,54.471 c0.48,0.449,1.127,0.714,1.82,0.676l48.578-2.721C172.82,284.568,173.783,283.448,173.653,282.14z"/>
</g>
<text transform="matrix(1 0 0 1 175.665 231.1914)" fill="#231F20" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" font-family="'Helvetica'" font-size="99.4919">A</text>
</svg>
I am guessing that it has something to do with how the image was created but can't find much resources on how to resolve the issue. Any help would be awesome!
Thanks.
IcoMoon will ignore stroke attributes and text objects. It is only interested in filled shapes. In your case, that means it will only import the triangle at the end of the circular curve.
You need to convert your paths and text into filled shapes. In Inkscape, try selecting your artwork and pressing CtrlShiftC. In Illustrator, there's an Outline Stroke option somewhere in the Path menu, and the command for converting text to outlines is, if I recall correctly, ⌘ShiftC on a Mac (probably ControlShiftC otherwise).
If you have any overlapping objects, they will probably have to be merged together too.
And don't expect perfect results. IcoMoon does a reasonable job, but it may convert curves into straight lines in some situations.
A little late to the party but I was facing the same issue so I created a node package that solves this issue.
Here is the SVG code after I run it through the fixer.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" style="
color: red;
">
<path d="M86.837 79.979 C 85.648 80.263,84.203 80.888,83.627 81.366 C 80.532 83.935,80.666 78.331,80.676 204.800 C 80.684 298.546,80.862 324.015,81.520 325.313 C 81.978 326.219,83.371 327.646,84.616 328.485 L 86.880 330.011 206.491 329.839 L 326.103 329.667 328.385 327.176 L 330.667 324.686 330.664 205.176 C 330.662 88.016,330.636 85.625,329.367 83.543 C 328.654 82.374,327.380 81.024,326.536 80.543 C 325.285 79.829,303.087 79.648,207.000 79.564 C 142.100 79.507,88.027 79.694,86.837 79.979 M315.835 204.833 L 315.667 315.000 205.667 315.000 L 95.667 315.000 95.498 204.833 L 95.329 94.667 205.667 94.667 L 316.004 94.667 315.835 204.833 M201.667 111.423 C 179.577 112.824,159.847 121.654,143.696 137.367 C 129.783 150.904,121.330 166.288,117.228 185.541 C 115.150 195.292,115.144 212.170,117.214 221.792 C 120.507 237.099,126.508 249.962,135.686 261.389 L 139.212 265.778 130.329 276.056 C 125.444 281.708,121.673 286.570,121.950 286.860 C 122.463 287.397,171.797 284.871,172.790 284.257 C 173.650 283.726,173.457 280.317,171.348 258.667 C 169.053 235.120,168.747 232.657,168.126 232.694 C 167.873 232.708,163.617 237.490,158.667 243.319 C 153.717 249.148,149.440 253.936,149.163 253.958 C 148.228 254.036,142.022 245.037,139.077 239.333 C 133.176 227.903,130.621 217.133,130.615 203.667 C 130.612 194.149,131.713 187.008,134.444 178.832 C 144.896 147.548,174.861 126.000,207.913 126.000 C 245.648 126.000,277.349 152.422,284.737 190.029 C 285.202 192.397,285.582 198.533,285.582 203.667 C 285.582 213.615,284.891 218.403,282.218 226.971 C 277.195 243.073,265.595 258.719,251.958 267.787 C 249.394 269.492,247.379 271.069,247.481 271.290 C 248.939 274.458,254.512 283.326,255.048 283.329 C 255.441 283.331,257.991 281.800,260.715 279.927 C 282.280 265.091,296.736 241.199,300.043 214.926 C 301.036 207.038,300.543 192.970,299.018 185.667 C 289.357 139.397,248.759 108.436,201.667 111.423 M202.120 160.810 C 201.391 162.748,195.065 179.433,188.064 197.888 C 181.062 216.343,175.333 231.568,175.333 231.721 C 175.333 231.875,178.049 232.000,181.367 232.000 L 187.401 232.000 188.262 229.833 C 188.736 228.642,190.255 224.436,191.638 220.488 L 194.154 213.310 209.828 213.488 L 225.502 213.667 228.665 222.667 L 231.829 231.667 237.968 231.859 C 243.609 232.036,244.075 231.955,243.722 230.859 C 243.510 230.203,237.210 213.467,229.721 193.667 L 216.105 157.667 209.776 157.477 L 203.447 157.286 202.120 160.810 M215.923 187.752 C 218.899 195.865,221.333 202.690,221.333 202.918 C 221.333 203.147,216.083 203.333,209.667 203.333 C 203.250 203.333,198.000 203.185,198.000 203.003 C 198.000 202.821,200.283 196.446,203.072 188.836 C 205.862 181.226,208.455 174.138,208.833 173.084 C 209.715 170.630,209.421 170.024,215.923 187.752 " stroke="none" fill="black" fill-rule="evenodd"></path>
</svg>
Here is what the SVG looks like on icomoon.io after it's fixed using the package.
Before it would look like this.
Notice the missing "A" in the middle of the icon and the mismatching colors
Command for converting text to outline in illustrator is: shift+command+O for mac.
or
1. select the text
2. Type -> create Outline
more info: http://reachheadwear.com/illustrator-101-creating-outlines
in my case, I added my SVG here svg-convert-stroke-to-fill and download a new converted SVG and upload that to icomoon, it works
Related
I am trying to get an element in an SVG file using XPath. I have tried the following code, but singleNodeValue is null. The doc seems to be correct, so I guess either evaluate() arguments or the XPath is wrong, but I cannot find anything wrong. Why doesn't it work?
JavaScript
fetch('test.svg')
.then(response => response.text())
.then(data=>{
const parser = new DOMParser();
const doc = parser.parseFromString(data, "text/xml");
console.log(doc);
const res = doc.evaluate("//symbol[#label='square']", doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
console.log(res.singleNodeValue);
})
SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<symbol label ="square">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
</symbol>
</svg>
After some testing, I have discovered that it works if I remove xmlns="http://www.w3.org/2000/svg". I searched the web and found an answer: Why XPath does not work with xmlns attribute
var data = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><symbol label ="square"><rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" /></symbol></svg>';
const parser = new DOMParser();
const doc = parser.parseFromString(data, "text/xml");
const res = doc.querySelector("symbol[label=square]");
console.log(res);
You can make use of a namespace resolver in XPath 1 and with the evaluate function and even of an XPath default namespace in XPath 2 and later such as supported by Saxon-JS 2:
const svgString = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
xmlns:dog = "http://dog.com/dog">
<symbol dog:label="square">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
</symbol>
<symbol dog:label="cat">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#f00" fill="#f00" fill-opacity="0.5" />
</symbol>
</svg>`;
const doc = new DOMParser().parseFromString(svgString, 'application/xml');
const result = doc.evaluate(`//svg:symbol[#dog:label='cat']`, doc, function(prefix) { if (prefix === 'svg') return 'http://www.w3.org/2000/svg'; else if (prefix === 'dog') return 'http://dog.com/dog'; else return null; }, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
console.log(result.singleNodeValue);
const result2 = SaxonJS.XPath.evaluate(`//symbol[#dog:label = 'cat']`, doc, { xpathDefaultNamespace : 'http://www.w3.org/2000/svg', namespaceContext : { 'dog' : 'http://dog.com/dog' } });
console.log(result2);
<script src="https://www.saxonica.com/saxon-js/documentation/SaxonJS/SaxonJS2.rt.js"></script>
I finished my personal website today (yey), but of course it doesn't work in IE. I wouldn't bother, if it wouldn't be for employers so my question is the following.
When I try to open the Yes I Code page the IE gives me an error message saying
SVG4601: SVG Path data has incorrect format and could not be completely parsed.
After googeling a bit, I found a few ideas that might help, but I am not generating the svg dynamically. The SVG is a data url generated via webpack from a file.
This is one of the many SVG files https://pastebin.com/En4YQwzC
This is the code that loads it via require
{
name: 'SQLite',
logo: require('../src/assets/logos/database/sqlite-seeklogo.com.svg'),
parent: [
'Database'
]
},
And this is the Vue.js component that renders the svg:
<template>
<div class="ulbricht-yes-i-code">
<div class="ulbricht-yes-i-code__framework-item" v-for="framework in frameworks" :key="framework.name">
<img class="ulbricht-yes-i-code__framework-logo" :src="dataUrl(framework.logo)" :alt="framework.name"/>
</div>
</div>
</template>
<script>
import YesICode from 'the file with all svg images';
export default {
name: "YesICode",
computed: {
yesICode() {
return YesICode;
},
frameworks() {
return YesICode.frameworks.filter(item => item.parent.includes(this.selectedGroup));
}
},
methods: {
dataUrl(input) {
return `data:image/svg+xml;charset=utf8,${encodeURIComponent(input.replace(/"/g, '\''))}`;
}
},
data() {
return {
selectedGroup: ''
}
}
}
</script>
The SVG gets injected into the DOM but is not displayed at all. Here is the rendered img tag
<img class="ulbricht-yes-i-code__framework-logo" alt="SQLite" src="data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D'0%200%20512%20228'%20version%3D'1.1'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20preserveAspectRatio%3D'xMidYMid'%3E%3Cdefs%3E%3ClinearGradient%20x1%3D'57.6615627%25'%20y1%3D'2.04644676%25'%20x2%3D'57.6615584%25'%20y2%3D'94.4387516%25'%20id%3D'linearGradient-1'%3E%3Cstop%20stop-color%3D'%2397D9F6'%20offset%3D'0%25'%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D'%230F80CC'%20offset%3D'92.024499%25'%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D'%230F80CC'%20offset%3D'100%25'%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%3E%3Cpath%20d%3D'M194.519337%2C112.044206%20C187.698564%2C112.044206%20182.152486%2C114.063211%20177.900552%2C118.099455%20C173.648619%2C122.139234%20171.491713%2C127.434452%20171.491713%2C133.922666%20C171.491713%2C137.285148%20172.027403%2C140.350953%20173.082873%2C143.160235%20C174.138343%2C145.975174%20175.780773%2C148.582909%20177.98895%2C150.939241%20C180.197127%2C153.297694%20184.617017%2C156.501413%20191.20442%2C160.5746%20C199.287514%2C165.509134%20204.577238%2C169.513908%20207.116022%2C172.640884%20C209.656575%2C175.765215%20210.917127%2C179.03947%20210.917127%2C182.453039%20C210.917127%2C187.023558%20209.412597%2C190.671912%20206.320442%2C193.414365%20C203.222983%2C196.158062%20199.080663%2C197.524862%20193.944751%2C197.524862%20C188.527735%2C197.524862%20183.809061%2C195.6153%20179.756906%2C191.823204%20C175.704751%2C188.025635%20173.659227%2C183.002703%20173.61326%2C176.707182%20L171.093923%2C176.707182%20L171.093923%2C199.558011%20L173.61326%2C199.558011%20C174.38232%2C197.394203%20175.44663%2C196.287293%20176.839779%2C196.287293%20C177.509834%2C196.287293%20179.079779%2C196.749436%20181.524862%2C197.61326%20C187.474033%2C199.730026%20192.358895%2C200.751381%20196.198895%2C200.751381%20C202.816354%2C200.751381%20208.464972%2C198.433775%20213.171271%2C193.723757%20C217.870497%2C189.015874%20220.243094%2C183.337017%20220.243094%2C176.707182%20C220.243094%2C171.56632%20218.676685%2C166.992435%20215.60221%2C163.005539%20C212.527735%2C159.013848%20206.548508%2C154.370829%20197.61326%2C149.038688%20C189.92442%2C144.419175%20184.933481%2C140.65681%20182.629834%2C137.723771%20C180.322652%2C134.794961%20179.138122%2C131.555204%20179.138122%2C128.000014%20C179.138122%2C124.154703%20180.550718%2C121.066084%20183.337017%2C118.762438%20C186.123315%2C116.457024%20189.774144%2C115.314924%20194.342541%2C115.314924%20C199.483757%2C115.314924%20203.769282%2C116.84067%20207.160221%2C119.911609%20C210.547624%2C122.987852%20212.506519%2C127.250747%20213.082873%2C132.729296%20L215.60221%2C132.729296%20L215.60221%2C112.928184%20L213.259669%2C112.928184%20C212.97326%2C113.937687%20212.708066%2C114.58299%20212.464088%2C114.872935%20C212.227182%2C115.161112%20211.77105%2C115.314924%20211.093923%2C115.314924%20C210.278895%2C115.314924%20208.825635%2C114.971941%20206.762431%2C114.29835%20C202.342541%2C112.809731%20198.267403%2C112.044206%20194.519337%2C112.044206%20L194.519337%2C112.044206%20Z%20M276.861878%2C112.044206%20C268.550718%2C112.044206%20261.005083%2C114.003101%20254.187845%2C117.922659%20C247.36%2C121.835145%20241.955359%2C127.268073%20237.966851%2C134.187859%20C233.98011%2C141.107101%20232%2C148.455772%20232%2C156.287307%20C232%2C166.808751%20235.443978%2C176.182269%20242.38674%2C184.39779%20C249.333039%2C192.608361%20257.656575%2C197.724471%20267.314917%2C199.690608%20C269.523094%2C200.841193%20272.682431%2C203.811359%20276.81768%2C208.618785%20C281.478011%2C214.044103%20285.420552%2C217.957127%20288.662983%2C220.287293%20C291.901878%2C222.618689%20295.398895%2C224.327425%20299.093923%2C225.458564%20C302.792486%2C226.584935%20306.791602%2C227.138122%20311.116022%2C227.138122%20C316.352707%2C227.138122%20321.041326%2C226.227978%20325.171271%2C224.353591%20L324.243094%2C222.055249%20C321.845746%2C222.919963%20319.289282%2C223.337017%20316.596685%2C223.337017%20C312.94232%2C223.337017%20309.249061%2C222.131978%20305.546961%2C219.712707%20C301.850166%2C217.287425%20297.226961%2C212.660162%20291.712707%2C205.834254%20C289.120884%2C202.563536%20287.331713%2C200.499978%20286.320442%2C199.690608%20C296.887514%2C197.62705%20305.577017%2C192.505635%20312.353591%2C184.309392%20C319.128398%2C176.116685%20322.519337%2C166.766518%20322.519337%2C156.287307%20C322.519337%2C143.84459%20318.092376%2C133.387499%20309.303867%2C124.861886%20C300.508287%2C116.335388%20289.691934%2C112.044206%20276.861878%2C112.044206%20L276.861878%2C112.044206%20Z%20M328.265193%2C112.044206%20L328.397719%2C114.740339%20C333.931421%2C114.740339%20337.030648%2C116.370394%20337.723686%2C119.646416%20C337.981808%2C120.818571%20338.100261%2C122.982902%20338.121476%2C126.099455%20L338.077348%2C185.723757%20C338.031381%2C190.176884%20337.396685%2C193.02011%20336.176796%2C194.254144%20C334.955138%2C195.479337%20332.890166%2C196.24663%20329.900552%2C196.552486%20L329.768027%2C199.248619%20L384.928248%2C199.248619%20L386.342612%2C185.723757%20L383.823275%2C185.723757%20C383.103717%2C189.408177%20381.454214%2C192.047565%20378.8288%2C193.546961%20C376.196314%2C195.057319%20371.541286%2C195.801105%20364.81775%2C195.801105%20L359.602281%2C195.801105%20C353.552336%2C195.801105%20350.051783%2C193.61396%20349.127143%2C189.21547%20C348.936203%2C188.345282%20348.870789%2C187.412324%20348.861949%2C186.38674%20L349.082944%2C126.099455%20C349.081529%2C121.653399%20349.643386%2C118.67404%20350.806701%2C117.215477%20C351.982391%2C115.762217%20354.10217%2C114.948957%20357.171341%2C114.740339%20L357.038815%2C112.044206%20L328.265335%2C112.044206%20L328.265193%2C112.044206%20Z%20M277.745856%2C115.314924%20C287.119558%2C115.314924%20294.773039%2C119.00677%20300.685083%2C126.453046%20C306.595359%2C133.901988%20309.524862%2C144.111211%20309.524862%2C157.038688%20C309.524862%2C169.288656%20306.552928%2C179.097289%20300.596685%2C186.475138%20C294.640442%2C193.850696%20286.712928%2C197.524862%20276.861878%2C197.524862%20C267.398011%2C197.524862%20259.723315%2C193.736133%20253.834254%2C186.121547%20C247.950497%2C178.506961%20245.038674%2C168.620906%20245.038674%2C156.464103%20C245.038674%2C143.971727%20247.985856%2C133.971631%20253.922652%2C126.497245%20C259.855912%2C119.030814%20267.801105%2C115.314924%20277.745856%2C115.314924%20L277.745856%2C115.314924%20Z%20M404.596685%2C128.132611%20C403.251271%2C128.132611%20402.225856%2C128.586975%20401.458564%2C129.502777%20C400.673591%2C130.415028%20400.433149%2C131.52%20400.707182%2C132.861893%20C400.972376%2C134.163631%20401.706077%2C135.3045%20402.872928%2C136.265208%20C404.032707%2C137.22501%20405.28442%2C137.723771%20406.629834%2C137.723771%20C407.93105%2C137.723771%20408.922873%2C137.225038%20409.635359%2C136.265208%20C410.347845%2C135.3045%20410.565304%2C134.163631%20410.298343%2C132.861893%20C410.024309%2C131.52%20409.315359%2C130.415028%20408.220994%2C129.502777%20C407.114254%2C128.586975%20405.897901%2C128.132611%20404.596685%2C128.132611%20L404.596685%2C128.132611%20Z%20M440.972376%2C137.281782%20C438.686409%2C146.075934%20433.730829%2C150.834917%20426.121547%2C151.602224%20L426.209945%2C154.121561%20L435.093923%2C154.121561%20L434.917127%2C183.911602%20C434.931271%2C189.004729%20435.086851%2C192.395669%20435.447514%2C194.121547%20C436.322652%2C198.253444%20439.020552%2C200.353591%20443.535912%2C200.353591%20C450.068508%2C200.353591%20456.921105%2C196.374276%20464.088398%2C188.41989%20L461.922652%2C186.563536%20C456.747845%2C191.801819%20452.172376%2C194.430939%20448.176796%2C194.430939%20C445.721105%2C194.430939%20444.198895%2C193.018696%20443.624309%2C190.232044%20C443.466961%2C189.555271%20443.403315%2C188.764471%20443.403315%2C187.845304%20L443.491713%2C154.121561%20L457.060773%2C154.121561%20L456.928248%2C150.099462%20L443.535982%2C150.099462%20L443.535982%2C137.281782%20L440.972446%2C137.281782%20L440.972376%2C137.281782%20Z%20M493.436464%2C148.508301%20C485.84663%2C148.508301%20479.672928%2C152.192721%20474.872928%2C159.513826%20C470.09768%2C166.847307%20468.619669%2C174.97228%20470.497238%2C183.911602%20C471.60221%2C189.14775%20473.803315%2C193.20593%20477.171271%2C196.066298%20C480.533923%2C198.925436%20484.8%2C200.353591%20489.900552%2C200.353591%20C494.649282%2C200.353591%20501.261436%2C199.151211%20504.044199%2C196.729282%20C506.834033%2C194.308766%20509.404641%2C190.38744%20511.779006%2C185.016575%20L509.878453%2C183.027624%20C506.091492%2C189.995138%20498.448619%2C193.502762%20492.685083%2C193.502762%20C484.761105%2C193.502762%20479.908066%2C189.155359%20478.099448%2C180.508287%20C477.864309%2C179.404545%20477.689282%2C178.218785%20477.569061%2C176.972376%20C486.995801%2C175.479867%20494.14011%2C172.836943%20498.961326%2C169.016575%20C503.779006%2C165.194099%20508.616133%2C161.142283%20507.712707%2C156.861893%20C507.175249%2C154.318328%20505.854586%2C152.318416%20503.823204%2C150.806644%20C501.765304%2C149.295579%20496.422541%2C148.508301%20493.436464%2C148.508301%20L493.436464%2C148.508301%20Z%20M410.475138%2C148.817694%20L394.121547%2C152.5746%20L394.121547%2C155.491727%20L399.779006%2C154.784545%20C402.519337%2C154.784545%20404.131713%2C156.02548%20404.640884%2C158.497252%20C404.812376%2C159.324485%20404.920221%2C160.486202%20404.950276%2C161.944766%20L404.773481%2C188.685083%20C404.727514%2C192.385414%20404.317348%2C194.536479%20403.491713%2C195.18232%20C402.659006%2C195.829392%20400.463204%2C196.154696%20396.906077%2C196.154696%20L396.81768%2C198.674033%20L422.762431%2C198.674033%20L422.718303%2C196.154696%20C419.113441%2C196.154696%20416.776203%2C195.870239%20415.734877%2C195.314917%20C414.711231%2C194.763145%20414.005817%2C193.758946%20413.701728%2C192.220994%20C413.46659%2C191.112656%20413.364049%2C189.202924%20413.348137%2C186.563536%20L413.436535%2C148.817694%20L410.475209%2C148.817694%20L410.475138%2C148.817694%20Z%20M489.281768%2C153.76797%20C490.860552%2C153.76797%20492.386298%2C154.377731%20493.922652%2C155.580125%20C495.43779%2C156.778275%20496.360663%2C158.110593%20496.662983%2C159.558025%20C498.142762%2C166.667159%20491.84%2C171.582048%20477.657459%2C174.320442%20C477.252597%2C169.136626%20478.150718%2C164.430865%20480.441989%2C160.17681%20C482.71558%2C155.926814%20485.676906%2C153.76797%20489.281768%2C153.76797%20L489.281768%2C153.76797%20Z'%20fill%3D'%23003B57'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M157.887646%2C9.95179492%20L17.1498785%2C9.95179492%20C7.71748066%2C9.95179492%201.42108547e-14%2C17.6706899%201.42108547e-14%2C27.1027341%20L1.42108547e-14%2C182.31016%20C1.42108547e-14%2C191.741666%207.71748066%2C199.459331%2017.1498785%2C199.459331%20L109.843448%2C199.459331%20C108.79135%2C153.338017%20124.54117%2C63.8308448%20157.887646%2C9.95179492%20L157.887646%2C9.95179492%20Z'%20fill%3D'%230F80CC'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M152.774718%2C14.9551098%20L17.1498785%2C14.9551098%20C10.4523315%2C14.9551098%205.00207735%2C20.4039496%205.00207735%2C27.1027341%20L5.00207735%2C170.986233%20C35.7181878%2C159.197504%2081.8193467%2C149.025535%20113.695413%2C149.487509%20C120.100971%2C115.994079%20138.926844%2C50.3540911%20152.774718%2C14.9551098%20L152.774718%2C14.9551098%20Z'%20fill%3D'url(%23linearGradient-1)'%3E%3C%2Fpath%3E%3Cpath%20d%3D'M190.71505%2C4.8724579%20C181.076155%2C-3.7233432%20169.405878%2C-0.270525525%20157.887646%2C9.95179492%20C156.178033%2C11.470469%20154.471956%2C13.1553308%20152.774718%2C14.9551098%20C133.070851%2C35.8576513%20114.781348%2C74.5758833%20109.099138%2C104.144944%20C111.312619%2C108.633784%20113.04168%2C114.361961%20114.180243%2C118.737651%20C114.471956%2C119.860303%20114.735381%2C120.914005%20114.945768%2C121.810358%20C115.446099%2C123.931729%20115.714829%2C125.307375%20115.714829%2C125.307375%20C115.714829%2C125.307375%20115.538033%2C124.638911%20114.813171%2C122.536988%20C114.675271%2C122.133894%20114.521459%2C121.693673%20114.339359%2C121.175662%20C114.261569%2C120.96174%20114.153724%2C120.70185%20114.035271%2C120.424281%20C112.749967%2C117.436436%20109.194608%2C111.130137%20107.629967%2C108.384502%20C106.291624%2C112.332347%20105.108862%2C116.025607%20104.118807%2C119.367044%20C108.635934%2C127.631883%20111.388641%2C141.795684%20111.388641%2C141.795684%20C111.388641%2C141.795684%20111.149967%2C140.877762%20110.014939%2C137.674056%20C109.007204%2C134.840546%20103.987978%2C126.046381%20102.799028%2C123.990425%20C100.765171%2C131.498587%2099.9570387%2C136.567669%20100.68579%2C137.801872%20C102.100685%2C140.193393%20103.448221%2C144.319802%20104.631514%2C148.88325%20C107.304663%2C159.163729%20109.162785%2C171.678918%20109.162785%2C171.678918%20C109.162785%2C171.678918%20109.222895%2C172.508259%20109.323669%2C173.784553%20C108.952398%2C182.417835%20109.17516%2C191.368811%20109.843448%2C199.459331%20C110.729193%2C210.169253%20112.396376%2C219.369526%20114.521459%2C224.293452%20L115.96411%2C223.506896%20C112.843669%2C213.805939%20111.576044%2C201.092568%20112.131182%2C186.430911%20C112.970961%2C164.020133%20118.128088%2C136.993747%20127.65737%2C108.824723%20C143.756376%2C66.3018502%20166.092729%2C32.1838391%20186.535602%2C15.8903585%20C167.903116%2C32.7177618%20142.684994%2C87.186712%20135.135823%2C107.35732%20C126.683227%2C129.944723%20120.693392%2C151.140929%20117.083227%2C171.4489%20C123.311735%2C152.410321%20143.450519%2C144.226624%20143.450519%2C144.226624%20C143.450519%2C144.226624%20153.328088%2C132.044885%20164.871072%2C114.641298%20C157.956597%2C116.218314%20146.602785%2C118.917983%20142.799912%2C120.516215%20C137.190188%2C122.869364%20135.678586%2C123.672016%20135.678586%2C123.672016%20C135.678586%2C123.672016%20153.849635%2C112.606381%20169.43947%2C107.595994%20C190.87947%2C73.828038%20214.237702%2C25.8563253%20190.71505%2C4.8724579'%20fill%3D'%23003B57'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E">
I currently have no Windows environment for debugging, so it is a bit hard to tackle it down. My current environment is an Azure VM. You can check out the site here: https://imanuel.ulbricht.codes/yesicode
Any help is appreciated, maybe there is even a better way to generate the DataURLs. Loading the files via HTTP doesn't solve the problem.
Update
After removing all images except the Java logo I still get the error. The SVG of the Java logo is as follows:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 256 346" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M82.5539491,267.472524 C82.5539491,267.472524 69.35552,275.147869 91.9468218,277.745105 C119.315549,280.867375 133.303389,280.419607 163.463913,274.711273 C163.463913,274.711273 171.393396,279.683258 182.467491,283.989644 C114.855564,312.966982 29.4483782,282.311215 82.5539491,267.472524"
fill="#5382A1"/>
<path d="M74.2921309,229.658996 C74.2921309,229.658996 59.4888145,240.616727 82.0968727,242.955171 C111.333004,245.971316 134.421411,246.218007 174.373236,238.524975 C174.373236,238.524975 179.899113,244.127185 188.588218,247.190807 C106.841367,271.094691 15.79008,249.075898 74.2921309,229.658996"
fill="#5382A1"/>
<path d="M143.941818,165.514705 C160.601367,184.695156 139.564684,201.955142 139.564684,201.955142 C139.564684,201.955142 181.866124,180.117876 162.438982,152.772422 C144.294633,127.271098 130.380335,114.600495 205.706705,70.9138618 C205.706705,70.9138618 87.4691491,100.44416 143.941818,165.514705"
fill="#E76F00"/>
<path d="M233.364015,295.441687 C233.364015,295.441687 243.131113,303.489396 222.60736,309.715316 C183.580858,321.537862 60.1748945,325.107898 25.8932364,310.186356 C13.5698618,304.825251 36.67968,297.385425 43.9491491,295.824291 C51.5304727,294.180305 55.8629236,294.486575 55.8629236,294.486575 C42.15808,284.832116 -32.7195927,313.443607 17.8287709,321.637469 C155.681513,343.993251 269.121164,311.570618 233.364015,295.441687"
fill="#5382A1"/>
<path d="M88.9008873,190.479825 C88.9008873,190.479825 26.1287564,205.389265 66.6717091,210.803433 C83.7901964,213.095331 117.915462,212.576815 149.702284,209.913484 C175.680233,207.722124 201.765236,203.062924 201.765236,203.062924 C201.765236,203.062924 192.605091,206.985775 185.977949,211.510924 C122.233949,228.275665 -0.907636364,220.476509 34.5432436,203.328233 C64.5241018,188.83584 88.9008873,190.479825 88.9008873,190.479825"
fill="#5382A1"/>
<path d="M201.506444,r253.422313 C266.305164,219.7504 236.344785,187.392 215.432844,191.751447 C210.307258,192.818269 208.021876,193.742662 208.021876,193.742662 C208.021876,193.742662 209.924655,190.761891 213.558924,189.471651 C254.929455,174.927127 286.746065,232.368873 200.204102,255.11936 C200.204102,255.120291 201.206691,254.223825 201.506444,253.422313"
fill="#5382A1"/>
<path d="M162.438982,0.371432727 C162.438982,0.371432727 198.325527,36.27008 128.402153,91.4720582 C72.3307055,135.753542 115.616116,161.001658 128.37888,189.848669 C95.6490473,160.318371 71.6297309,134.322735 87.7437673,110.128407 C111.395375,74.6132945 176.918342,57.3942691 162.438982,0.371432727"
fill="#E76F00"/>
<path d="M95.2683055,344.665367 C157.466996,348.646865 252.980131,342.45632 255.24224,313.025629 C255.24224,313.025629 250.893964,324.182575 203.838371,333.042967 C150.750487,343.033484 85.2740655,341.867055 46.4393309,335.464262 C46.4402618,335.463331 54.3892945,342.043927 95.2683055,344.665367"
fill="#5382A1"/>
</g>
</svg>
My current idea is, to detect the IE via UA and then displaying PNGs instead of SVG files. But I am unsure if that is really the only solution.
I need to convert a svg into a png. I tried using this code
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: #000;
fill-opacity: .8;
}
</style>
<body>
<div id="svg">
<?php include 'small.svg'; ?>
</div>
<button id="save">Save as Image</button>
<h2>SVG dataurl:</h2>
<div id="svgdataurl"></div>
<h2>SVG converted to PNG dataurl via HTML5 CANVAS:</h2>
<div id="pngdataurl"></div>
<canvas width="960" height="500" style="display:none"></canvas>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement( "canvas" );
var ctx = canvas.getContext( "2d" );
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
// Now is done
console.log( canvas.toDataURL( "image/png" ) );
};
document.getElementById("pngdataurl").appendChild(img);
</script>
but it doenst work. im pretty sure it's because im using an image pattern, rect and a clip path to product my SVG. I say that because i tried this code with just the path object and it worked fine. I also tried using image magic with this code
<?php
error_reporting(E_ALL);
$svg ="small.svg";
$mask = new Imagick('mask.png');
$im = new Imagick();
//$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob($svg);
$im->setImageFormat("png32");
$im->compositeImage( $mask, imagick::COMPOSITE_DEFAULT, 0, 0 );
header('Content-type: image/png');
echo $im;
?>
Fatal error: Uncaught exception 'ImagickException' with message 'no decode delegate for this image format `' # error/blob.c/BlobToImage/346' in /home/[path to file]:10 Stack trace: #0 /home/path to file: Imagick->readimageblob('small.svg') #1 {main} thrown in /home/[path to file] on line 10
i would rather do this with js if possible. please help...my boss really hates me right now. Here is my svg
<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 3384.2 2608.6" enable-background="new 0 0 3384.2 2608.6" xml:space="preserve">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/7/71/Weaved_truncated_square_tiling.png" x="0" y="0" width="100%" height="100%" />
</pattern>
</defs>
<rect width="3384.2" height="2608.6" clip-path="url(#shirt)" fill="url(#img1)" />
<clipPath id="shirt">
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#img1)" d="[coordinates that are too long for this post ]"/>
</clipPath>
</svg>
I had this issue recently too, at least with the pattern fills - it seems to be an issue with remote images, so if you base64 encode them into a data URL, it works fine:
var img = new Image();
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext('2d').drawImage(img, 0, 0);
var patternImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
patternImage.setAttributeNS('http://www.w3.org/1999/xlink', 'href', canvas.toDataURL());
};
img.src = patternImageUrl;
You can then add/update this image in a pattern def (or do this once and hardcode the result of canvas.toDataURL() into the pattern image href).
I'm loading a svg image from file and manipulate it with d3js. It's working fine, but now I have do do a more complicated part. There is a group in this SVG which should be replaced in two cases.
The original svg is loaded with:
d3.xml('img/image.svg', "image/svg+xml",
function (xml) {
var importedNode = document.importNode(xml.documentElement, true);
d3.select("#svg-image").node().appendChild(importedNode);
//maniupulate something
d3.select('#text1').text(' New Text');
});
I' am trying to load the new svg in the same manner with:
d3.xml('img/new_tiny.svg', "image/svg+xml",
function (xml) {
var importedNode = document.importNode(xml.documentElement, true);
// remove the old image
d3.select("#g3394").remove();
//append new image
d3.select("#g3353").node().appendChild(importedNode);
});
But it is displaced and extra large.
Update: Here is the content of the group:
<g
i:extraneous="self"
id="g3353"
transform="translate(1286.3344,71.310647)">
<g
id="g3394"
transform="translate(-2.5610031,0)">
<g
id="g3355">
x="1306.5291"
y="110.07136
<circle
style="fill:#524c48"
sodipodi:ry="9.3999996"
sodipodi:rx="9.3999996"
sodipodi:cy="63.200001"
sodipodi:cx="48"
d="M 57.4,63.200001 C 57.4,68.391477 53.191476,72.6 48,72.6 c -5.191476,0 -9.4,-4.208523 -9.4,-9.399999 0,-5.191477 4.208524,-9.4 9.4,-9.4 5.191476,0 9.4,4.208523 9.4,9.4 z"
id="circle3357"
r="9.3999996"
cy="63.200001"
cx="48" /><path
style="fill:#ff6600"
inkscape:connector-curvature="0"
id="path3359"
d="m 48,75.3 c -6.6,0 -12.1,-5.4 -12.1,-12.1 0,-6.7 5.4,-12 12.1,-12 6.7,0 12,5.4 12,12 0,6.6 -5.4,12.1 -12,12.1 z m 0,-18.8 c -3.7,0 -6.7,3 -6.7,6.7 0,3.7 3,6.7 6.7,6.7 3.7,0 6.7,-3 6.7,-6.7 0,-3.7 -3,-6.7 -6.7,-6.7 z" /></g><g
id="g3361"><circle
style="fill:#524c48"
sodipodi:ry="9.3999996"
sodipodi:rx="9.3999996"
sodipodi:cy="63.200001"
sodipodi:cx="160.5"
d="m 169.9,63.200001 c 0,5.191476 -4.20852,9.399999 -9.4,9.399999 -5.19148,0 -9.4,-4.208523 -9.4,-9.399999 0,-5.191477 4.20852,-9.4 9.4,-9.4 5.19148,0 9.4,4.208523 9.4,9.4 z"
id="circle3363"
r="9.3999996"
cy="63.200001"
cx="160.5" /><path
style="fill:#ff6600"
inkscape:connector-curvature="0"
id="path3365"
d="m 160.5,75.3 c -6.6,0 -12.1,-5.4 -12.1,-12.1 0,-6.7 5.4,-12.1 12.1,-12.1 6.7,0 12.1,5.4 12.1,12.1 0,6.7 -5.5,12.1 -12.1,12.1 z m 0,-18.8 c -3.7,0 -6.7,3 -6.7,6.7 0,3.7 3,6.7 6.7,6.7 3.7,0 6.7,-3 6.7,-6.7 0,-3.7 -3,-6.7 -6.7,-6.7 z" /></g><g
id="g3367"><path
style="fill:#ffffff"
inkscape:connector-curvature="0"
id="path3369"
d="M 126.9,64.5 H 68.5 c -0.7,0 -1.3,-0.6 -1.3,-1.3 0,-0.7 0.6,-1.3 1.3,-1.3 h 58.4 c 0.7,0 1.3,0.6 1.3,1.3 0,0.7 -0.6,1.3 -1.3,1.3 z" /><g
id="g3371"><polygon
style="fill:#ffffff"
id="polygon3373"
points="140.1,63.2 121.5,70.8 125.9,63.2 121.5,55.6 " /></g></g></g></g>
How can I replace a group with another svg and preserve position and size?
I am trying to add current time to an SVG file using ECMAScript.
Following is the code I have. Unfortunately it's not working. How do I fix it?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<text x="0" y="15" fill="red">It is now
<script type="text/javascript">
<![CDATA[
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
document.write(month + "/" + day + "/" + year);
]]>
</script>
</text>
</svg>
Demo: http://jsfiddle.net/M8YXS/
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<text x="0" y="15" fill="red">It is now <tspan id="now">(time)</tspan></text>
<!--
This script block must either be after the element in the source code
or else the code below must be wrapped in a callback that is invoked
only after the DOM is created (e.g. window.onload in a browser)
-->
<script>
// Create whatever string you want
var dateString = (new Date).toDateString();
// Set the string content of the Text Node child of the <tspan>
document.getElementById('now').firstChild.nodeValue = dateString;
</script>
</svg>