IE SVG4601 Error with SVG as data URL - javascript

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.

Related

Error loading svg data with html2canvas and jspdf

I have a very simple svg
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
and trying to print it with html2canvas and jspdf. But whatever I do I get an error
Error loading svg data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%22100%22%20width%3D%22100%22%20style%3D%22-webkit-writing-mode%3A%20horizontal-tb%3B%20-webkit-user-modify%3A%20read-only%3B%20-webkit-user-drag%3A%20auto%3B%20-web
Oe.error # html2canvas-1.1.2.min.js:20
and test.pdf file with just word test in it.
I googled this for about 3 hours, and in every place people recommend settings width/height atributes. Which, as you can see, doesn't help in my case.
I've simplified it as much as I could. Here is the full index.html I use:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="printId">
test
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
<script src="../../../script/jsPDF/jspdf-2.3.1.umd.min.js" defer></script>
<script src="../../../script/jsPDF/html2canvas-1.1.2.min.js" defer></script>
<script>
function saveAsPDF(divId, usersName, certNumber = '', type = 'old')
{
const { jsPDF } = window.jspdf;
const pdf = new jsPDF();
var source = document.getElementById("printId");
pdf.html(
source, {
callback: function (pdf) {
pdf.save("test.pdf");
},
});
}
</script>
<input type='submit'
onclick='saveAsPDF();'
value='save'>
</body>
</html>
I also tried all possible versions of html2canvas:
1.1.2
1.1.5
1.2.2
1.3.2
and two versions of jspdf:
2.1.1
2.3.1
And two browsers: Chrome and Opera.
What can be my issue?
Edit:
I managed to make html2canvas work on it's own with the document below. Now the question is how to make it work with jspdf together:
<html>
<head></head>
<body>
<div id="printId">
this is circle:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
<hr>
<h4>Image of above HTML content...</h4>
<div id="canvasImg"></div>
<script src="../../../script/jsPDF/html2canvas-1.3.2.min.js"></script>
<script>
html2canvas(document.getElementById('printId')).then(function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
document.getElementById('canvasImg').innerHTML = '<img src="'+canvasImg+'" alt="">';
});
</script>
</body>
</html>
It looks like jspdf is not able to add svg as vector graphic to a page. There are three options:
Use svg2pdf instead of jspdf to convert svg to pdf on it's own.
Use addSvgAsImage function of jspdf to place an svg in the pdf page manually.
Convert svg to jpg first, then use jspdf.
I've chosen the 3rd option and wrote a function, which I run before saving canvas as pdf:
htmlToJpg: function()
{
var canvas = document.querySelector('.to-print');
screenWidth = parseFloat(window.getComputedStyle(canvas).width);
var problematic = document.querySelectorAll('.convert-to-jpg');
problematic.forEach(function(el) {
html2canvas(el,
{
scale: 2480/screenWidth // 2480px - size for A4 paper, 300 dpi
}
)
.then(function(canvas) {
var img = canvas.toDataURL("image/jpeg");
el.innerHTML = '<img src="' + img + '" class="img">';
});
});
}
import html2canvas from 'html2canvas';
import { jsPDF as JsPDF } from 'jspdf';
import { useCallback, useEffect } from 'react';
export const useDownloadPdf = (name: string, isReady: boolean) => {
useEffect(() => {
if (isReady) {
const fileName = `${name}.pdf`;
const pdf = new JsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts: true,
});
const convertElements = document.querySelectorAll('.convert-on-pdf');
const elements = Array.from(convertElements) as HTMLElement[];
if (elements.length > 0) {
Promise.all(
elements.map(async (element) => {
const canvas = await html2canvas(element);
element.replaceWith(canvas);
}),
).then(() => {
pdf.html(document.body, {
callback: (generatedPdf) => {
generatedPdf.save(fileName)
},
});
});
} else {
pdf.html(document.body, {
callback: (generatedPdf) => {
generatedPdf
.save(fileName)
},
});
}
}
}, [isReady, name, setAtribute]);}

How to grid a polyline points? Pathfinding.js library

I have a shape like this:
Is it possible to grid them using their points and store it in an array?
<polyline class="st8" points="2022.5,409.3 1996.1,409.3 1996.1,296.8 1970.4,296.8 1970.4,324.4 1920.2,324.4 1920.2,429.3
1667.7,429.3 1667.7,360.5 1631.4,360.5 1631.4,408.5 1445,408.5 1445,362.3 1357.4,362.3 1357.4,408.5 962.3,408.5 962.3,362.3
874.8,362.3 874.8,408.5 721.1,408.5 721.1,362.3 633.6,362.3 633.6,408.5 480,408.5 225.4,408.5 225.4,370 168.9,370 168.9,408.6
113.3,408.6 113.3,512.4 110,512.4 170.4,512.4 170.4,564.9 170.4,595.1 170.4,633.5 191.2,633.5 225.2,633.5 225.2,590.2
225.2,500.5 479.9,500.5 589,500.5 589,546.5 721.4,546.5 721.4,500.5 914.4,500.5 914.7,546.5 986.9,546.5 987,500.5
1398.2,500.5 1398.3,546.5 1470.6,546.5 1470.6,500.5 1660.6,500.5 1660.6,544.9 1723,544.9 1723,500.5 1919.1,500.5 1919.1,511.3
2022.5,511.3 2022.5,409.3 "/>
Edit: Is it possible to use Pathfinding.js to the grid and how will I set the setWalkableAt function in the library?
Inspired by the mention of the SVG DOM in How do I add coordinates to an SVG polyline?, I came up with...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var polyline= document.getElementById("myPolyline");
var pts = [];
for (var i=0; i < polyline.points.length; i++) {
pts.push([polyline.points[i].x, polyline.points[i].y]);
}
console.log(pts);
}
</script>
</head>
<body>
<svg width="1920" height="340">
<polyline id="myPolyline" class="st8" points="2022.5,409.3 1996.1,409.3 1996.1,296.8 1970.4,296.8 1970.4,324.4 1920.2,324.4 1920.2,429.3
1667.7,429.3 1667.7,360.5 1631.4,360.5 1631.4,408.5 1445,408.5 1445,362.3 1357.4,362.3 1357.4,408.5 962.3,408.5 962.3,362.3
874.8,362.3 874.8,408.5 721.1,408.5 721.1,362.3 633.6,362.3 633.6,408.5 480,408.5 225.4,408.5 225.4,370 168.9,370 168.9,408.6
113.3,408.6 113.3,512.4 110,512.4 170.4,512.4 170.4,564.9 170.4,595.1 170.4,633.5 191.2,633.5 225.2,633.5 225.2,590.2
225.2,500.5 479.9,500.5 589,500.5 589,546.5 721.4,546.5 721.4,500.5 914.4,500.5 914.7,546.5 986.9,546.5 987,500.5
1398.2,500.5 1398.3,546.5 1470.6,546.5 1470.6,500.5 1660.6,500.5 1660.6,544.9 1723,544.9 1723,500.5 1919.1,500.5 1919.1,511.3
2022.5,511.3 2022.5,409.3 "/>
</svg>
</body>
</html>
Note that I gave the polyline an id attribute to make it easy to get a reference to it with document.getElementById().
Look in the console of your browser's developer tools to see the array of arrays.

Update HTML to have closing tags with JavaScript or jQuery

Note: See the solution below!
The Problem
By default both JS and jQuery will remove closing tags for empty <foreignObject>'s. Normally this wouldn't be a problem. However, in IE11 the following warning will be thrown due to the self-closing elements.
HTML1500: Tag cannot be self-closing. Use an explicit closing tag.
Case Study
I'm attempting to utilize Gulp to add closing tags to a series of SVG files. SVG files are formatted as such initially:
Email.svg,
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="#AFAFB0" fill-rule="evenodd" d="M1,5 L23,5 C23.5522847,5 24,5.44771525 24,6 L24,18 C24,18.5522847 23.5522847,19 23,19 L1,19 C0.44771525,19 6.76353751e-17,18.5522847 0,18 L0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 Z M21.2034005,7.09747208 L12,13.8789251 L2.79659952,7.09747208 C2.57428949,6.93366469 2.26127947,6.98109045 2.09747208,7.20340048 C1.93366469,7.42571051 1.98109045,7.73872053 2.20340048,7.90252792 L11.7034005,14.9025279 C11.8797785,15.0324907 12.1202215,15.0324907 12.2965995,14.9025279 L21.7965995,7.90252792 C22.0189095,7.73872053 22.0663353,7.42571051 21.9025279,7.20340048 C21.7387205,6.98109045 21.4257105,6.93366469 21.2034005,7.09747208 Z"/>
</svg>
In my gulpfile I'm utilizing gulp-cheerio to attempt to manipulate the HTML by adding the closing tag to any self-closing elements.
gulpfile.js
const gulp = require('gulp');
const cheerio = require('gulp-cheerio');
const rootPath = './src/assets';
const paths = {
svg: {
in: `${rootPath}/icons/raw/**/*.svg`,
out: `${rootPath}/icons/svg`,
}
};
const svg = () => {
return gulp
.src(paths.svg.in)
.pipe(cheerio({
run: ($, file) => {
const updatedHtml = $.html().replace(/<\s*([^\s>]+)([^>]*)\/\s*>/g, '<$1$2></$1>');
// Update self-closing elements to have a closing tag
$('svg').replaceWith(updatedHtml);
}
}))
.pipe(gulp.dest(paths.svg.out));
};
If I console.log the updatedHtml it will have the closing tag. However, when I utilize .html() or .replaceWith() the output has a self-closing tag.
I have also tried the gulp-replace package. The below producse the same result as the above.
const svg = () => {
return gulp
.src(paths.svg.in)
.pipe(replace(/<\s*([^\s>]+)([^>]*)\/\s*>/g, '<$1$2></$1>'))
.pipe(gulp.dest(paths.svg.out));
};
Question
How do I get the output to include the closing tag? Is there a better package for this or is this not really possible?
Feels like a work-around but got the SVG saving by removing .pipe(gulp.dest(paths.svg.out)); and instead making use of fs.
const gulp = require('gulp');
const cheerio = require('gulp-cheerio');
const fs = require('fs');
const rename = require('gulp-rename');
const rootPath = './src/assets';
const paths = {
svg: {
in: `${rootPath}/icons/raw/**/*.svg`,
out: `${rootPath}/icons/svg`,
}
};
const svg = () => {
let dirName;
let fileName;
return gulp
.src(paths.svg.in)
.pipe(rename((path) => {
// Ensure the file name is kebob-case
path.basename = path.basename
.replace(/[^A-Za-z0-9\ ]/g, '')
.replace(/([a-z])([A-Z])/g, '$1-$2')
.replace(/\s+/g, '-')
.toLowerCase();
dirName = path.dirname;
fileName = path.basename;
}))
.pipe(cheerio({
run: ($, file) => {
$('svg').attr('class', `svg-${fileName}`);
const path = `${paths.svg.out.svg}/${dirName}/${fileName}.svg`;
const updatedHtml = $.html().replace(/<\s*([^\s>]+)([^>]*)\/\s*>/g, '<$1$2></$1>');
fs.writeFile(path, updatedHtml);
}
}))
};
which, based on the above SVG, returns
<svg width="24" height="24" viewbox="0 0 24 24" class="svg-email">
<path fill="#AFAFB0" fill-rule="evenodd" d="M1,5 L23,5 C23.5522847,5 24,5.44771525 24,6 L24,18 C24,18.5522847 23.5522847,19 23,19 L1,19 C0.44771525,19 6.76353751e-17,18.5522847 0,18 L0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 Z M21.2034005,7.09747208 L12,13.8789251 L2.79659952,7.09747208 C2.57428949,6.93366469 2.26127947,6.98109045 2.09747208,7.20340048 C1.93366469,7.42571051 1.98109045,7.73872053 2.20340048,7.90252792 L11.7034005,14.9025279 C11.8797785,15.0324907 12.1202215,15.0324907 12.2965995,14.9025279 L21.7965995,7.90252792 C22.0189095,7.73872053 22.0663353,7.42571051 21.9025279,7.20340048 C21.7387205,6.98109045 21.4257105,6.93366469 21.2034005,7.09747208 Z"></path>
</svg>

Transfer SVG code DIV-input-DIV

I'm just curious - is it possible to send by SVG image code in the following way?
<original div with inline SVG> -> Input field -> <final DIV>
I want to use following code:
Copy-1
<div id="source-1">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
</div>
<input name="dynamichidden-637" value="" id="pole" />
<br />
Copy-2
<div id="source-2"></div>
and Jquery:
jQuery( document ).ready(function( $ ) {
$('#copy-1').click(function() {
var value = $('#source-1').html();
var input = $('#pole');
input.val('')
input.val(input.val() + value);
return false;
});
$('#copy-2').click(function() {
$('#pole').appendTo('#source-2');
return false;
});
});
So my question is - is it possible to achieve it in that way? or using somehow other solution which will allow me to transfer svg code from one page to another without storing the data in Database? This is JSfiddle:
http://jsfiddle.net/v2br8/16/
You just need to create the copy using the value of the input:
var value = $('#pole').val();
var copy = $(value);
copy.appendTo('#source-2');
or simply:
$($('#pole').val()).appendTo('#source-2');
DEMO
Try: source-2.innerHTML=source_1.innerHTML

How to show SVG with JavaScript in img

I have a php-file that sends an SVG header and draws itself partly with JavaScript. Everything works fine when I show the SVG directly in the browser. However, when I embed it in an <img>, then the JavaScript seems not to be executed. Maybe I am doing something wrong?
Here is the php-file (testsvg.php):
<?php
header('Content-type: image/svg+xml');
?>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="800"
height="600"
id="example_text">
<g id="layer1">
<text
x="100"
y="100"
id="text_holder">
<?php echo filter_input(INPUT_GET, 'text'); ?>
</text>
</g>
<script type="text/javascript">
function create_from_rect (client_rect, offset_px) {
if (! offset_px) {
offset_px=0;
}
var box = document.createElementNS(
document.rootElement.namespaceURI,
'rect'
);
if (client_rect) {
box.setAttribute('x', client_rect.left - offset_px);
box.setAttribute('y', client_rect.top - offset_px);
box.setAttribute('width', client_rect.width + offset_px * 2);
box.setAttribute('height', client_rect.height + offset_px * 2);
}
return box;
}
function add_bounding_box (text_id, padding) {
var text_elem = document.getElementById(text_id);
if (text_elem) {
var f = text_elem.getClientRects();
if (f) {
var bbox = create_from_rect(f[0], padding);
bbox.setAttribute(
'style',
'fill: none;'+
'stroke: black;'+
'stroke-width: 0.5px;'
);
text_elem.parentNode.appendChild(bbox);
}
}
}
add_bounding_box('text_holder', 10);
</script>
</svg>
(The SVG/JavaScript is mostly taken from How can I draw a box around text with SVG?.)
When I open this file directly in the browser, e.g. with http://localhost/testsvg.php?text=Test it draws a proper box around the text Test.
However, when I embed it with an <img>, e.g. with <img src="testsvg.php?text=Test" alt="">, it does not show the box.
To protect user's privacy, script is not run in images. There are other restrictions.
When thinking of an image it helps to have the mental model "could I do this if I used a raster image"? If you bear that in mind you won't go far wrong as that's basically the model the browsers implement.
Your alternatives are to use <object> or <iframe> tags instead of <img> as they do allow scripting.

Categories

Resources