savgy
Version:
Get self-contained SVGs or bitmaps from SVG
2 lines (1 loc) • 28.6 kB
JavaScript
const e={fonts:{},images:{},css:{},svg:{}},t={download:'<svg viewBox="0 0 100 100" class="icn-svg icn-download"><path stroke="currentColor" d="M49.4 67.3v-62.3m-40 80h80m-0.4 -53.7l-39.6 36l-39.6 -36"/></svg>',copy:'<svg viewBox="0 0 86 100" class="icn-svg icn-copy "><path stroke="currentColor" d="M75.7 85h-47v-62.5h25l22 22zm-66 -5v-75h40"></path><path stroke="currentColor" stroke-linejoin="round" stroke-miterlimit="3" d="M75.7 44.5h-22v-22z"/></svg>',file:'<svg viewBox="0 0 71 100" class="icn-svg icn-file"><path stroke="currentColor" d="M60.4 85h-50.8v-70h28.7l22 22z" /><path stroke="currentColor" stroke-linejoin="round" stroke-miterlimit="3" d="M60.4 37h-22v-22z" /></svg>',spinner:'<svg class="icn-svg icn-spinner" viewBox="0 0 100 100">\n <path stroke="currentColor" stroke-linejoin="round" fill="none" d="M 50 10 a 40 40 0 1 1 -40 40">\n <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 50 50;360 50 50" repeatCount="indefinite"></animateTransform>\n </path>\n </svg>',checkbox_filled:'<svg viewBox="0 0 105 100" class="icn-svg icn-checkbox-filled"><path d="M18.3 9h62.2c4.9 0 8.9 4 8.9 8.9v62.2c0 4.9 -4 8.9 -8.9 8.9h-62.2c-4.9 0 -8.9 -4 -8.9 -8.9v-62.2c0 -4.9 4 -8.9 8.9 -8.9z" stroke="none" style="fill:var(--icon-bg, white)" /> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M36.1 44.6l13.3 13.3l44.4 -44.4m-4.4 35.5v31.1c0 4.9 -4 8.9 -8.9 8.9h-62.2c-4.9 0 -8.9 -4 -8.9 -8.9v-62.2c0 -4.9 4 -8.9 8.9 -8.9h48.9" /></svg>',checkbox:'<svg viewBox="0 0 100 100" class="icn-svg icn-checkbox"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M18.5 9h62.2c4.9 0 8.9 4 8.9 8.9v62.2c0 4.9 -4 8.9 -8.9 8.9h-62.2c-4.9 0 -8.9 -4 -8.9 -8.9v-62.2c0.1 -4.9 4 -8.9 8.9 -8.9z" style="fill:var(--icon-bg, white)"></path></svg>',chevron_down:'<svg viewBox="0 0 95 100" class="icn-svg icn-chevron-down"><path stroke="currentColor" d="M84.4 32l-37.5 37.5l-37.5 -37.5" /></svg>',close:'<svg viewBox="0 0 100 100" class="icn-svg icn-close"><path stroke="currentColor" d="M89.1 10l-80 80m80 0l-80 -80" /></svg>'};function l(e){return new Promise(((t,l)=>{const a=new FileReader;a.onload=()=>t(a.result),a.onerror=e=>l(e),a.readAsDataURL(e)}))}async function a(e,t=null,l=null,a="png",n="1",o="transparent",s=!1,r=null){let i="string"==typeof e,c=!t||!l,_='xmlns="http://www.w3.org/2000/svg"';if(!(i?e.includes(_):e.getAttribute("xmlns"))&&i&&(e=e.replace("<svg ",`<svg ${_} `)),c){if(i){let a=(e=(new DOMParser).parseFromString(e,"text/html").querySelector("svg")).getAttribute("viewBox")||"0 0 300 150",[,,n,o]=a.split(/,| /);[t,l]=+e.getAttribute("width")&&+e.getAttribute("height")?[e.width,e.height]:[n,o],i=!1}e.setAttribute("width",t),e.setAttribute("height",l)}let g=i?e:(new XMLSerializer).serializeToString(e),u="data:image/svg+xml; charset=utf8, "+encodeURIComponent(g),p=new Image;p.crossOrigin="anonymous",p.src=u,p.width=t,p.height=l,r||(r=document.createElement("canvas")),r.width=t,r.height=l;let d=r.getContext("2d");return("jpeg"===(a=a.replace(/image\//g,"").replace(/jpg/g,"jpeg"))||s)&&(o="transparent"!==o?o:"#fff",d.fillStyle=o,d.fillRect(0,0,t,l)),await p.decode(),await d.drawImage(p,0,0,t,l),r.toDataURL(`image/${a}`,n)}function n(e,t={},l=!1,a=[],n="",o=!1,s={}){let i=[],c=[];for(let o=0,s=e.cssRules.length;s&&o<s;o++){let s=e.cssRules[o];if(5===s.type){let[e,_,g,u]=[s.style.getPropertyValue("font-family").replace(/"|'| /g,""),s.style.getPropertyValue("font-weight")||"400",s.style.getPropertyValue("font-style")||"normal",s.style.getPropertyValue("font-stretch")||"100"],p=n||(a[o]?a[o]:"latin");_=_.split(" ").map((e=>r(e,"weight"))),u=u.split(" ").map((e=>r(e,"stretch")));let d=[e,_[0],g,u[0],p].join("_").replace(/"|'| /g,"").trim();if(_.length>1||u.length>1){for(let a in t)if("allText"!==a){let[t,n,o,s,r]=a.split("_");t===e&&o===g&&+n>=_[0]&&+s>=u[0]&&r===p&&l&&i.push(d)}}else t[d]?l&&i.push(d):c.push(o)}}return{fontsToSubset:i,exclude:c}}function o(e,t=[],l=""){let a={};for(let n=0,o=e.cssRules.length;o&&n<o;n++){let o=e.cssRules[n];if(5===o.type){let[e,s,i,c]=[o.style.getPropertyValue("font-family").replace(/"|'| /g,""),o.style.getPropertyValue("font-weight")||"400",o.style.getPropertyValue("font-style")||"normal",o.style.getPropertyValue("font-stretch")||"100"],_=l||(t[n]?t[n]:"latin");a[e]||(a[e]={weights:new Set([]),widths:new Set([]),styles:new Set([]),isVF:!1,subsets:new Set([]),keys:new Set}),s=s.split(" ").map((e=>r(e,"weight"))),c=c.split(" ").map((e=>r(e,"stretch"))).filter(Boolean);let g=s.length>1||c.length>1;s.forEach((t=>a[e].weights.add(t))),c.forEach((t=>a[e].widths.add(t))),a[e].isVF=g,a[e].subsets.add(_),a[e].styles.add(i)}}return a}function s(e,t){for(let l in t)if("allText"!==l){let[a,n,o,s,r]=l.split("_");[n,s]=[n,s].map(Number);let i=e[a];if(!i)continue;if(i.styles.has(o)&&i.subsets.has(r)){let e=s,c=n;if(!i.weights.has(n)){let e=[...i.weights],t=Math.min(...e),l=Math.max(...e);n>l&&(c=l),n<t&&(c=t)}if(!i.widths.has(s)){let t=[...i.widths],l=Math.min(...t),a=Math.max(...t);s<l&&(e=l),s>a&&(e=a)}if(c!=n||e!==s){t[[a,c,o,e,r].join("_")]=t[l],delete t[l]}}}return t}function r(e,t="weight"){if(!isNaN(e))return parseFloat(e);if(e=e.trim().toLowerCase(),"stretch"===t){if(e.includes("%"))return parseFloat(e);return{"ultra-condensed":50,"extra-condensed":62.5,condensed:75,"semi-condensed":87.5,normal:100,"semi-expanded":112.5,expanded:125,"extra-expanded":150,"ultra-expanded":200}[e]||100}if("weight"===t){return{thin:100,"extra-light":200,"ultra-light":200,light:300,normal:400,regular:400,medium:500,"semi-bold":600,"demi-bold":600,bold:700,"extra-bold":800,"ultra-bold":800,black:900,heavy:900}[e]||400}}function i(e){let t={latin:[[32,127]],"latin-ext":[[160,255],[256,383]],cyrillic:[[1024,1279]],"cyrillic-ext":[[1280,1327],[11744,11775],[42560,42655]],greek:[[880,1023]],"greek-ext":[[880,1023],[7936,8191]],vietnamese:[[258,259]],arabic:[[1536,1791]],hebrew:[[1424,1535]],PUA:[[57344,63743],[983040,1048573],[1048576,1114109]]};const l=(e,t)=>{let l=0;return t.forEach((([t,a])=>{e.forEach((([e,n])=>{const o=Math.max(t,e),s=Math.min(a,n);o<=s&&(l+=s-o+1)}))})),l},a=e.split(",").map((e=>{const[t,l]=e.trim().replace("U+","").split("-"),a=parseInt(t,16);return[a,l?parseInt(l,16):a]}));const n=[];for(const[e,o]of Object.entries(t)){const t=l(a,o);t>0&&n.push({language:e,overlap:t})}let o=n.sort(((e,t)=>t.overlap-e.overlap));return o=o.length?o[0].language:"",o}function c(e){let t=function(e){e.sort(((e,t)=>e-t));let t=(e,t=!0)=>(t?"U+":"")+e.toString(16).toUpperCase().padStart(4,"0"),l=[],a=e[0],n=a;for(let o=1;o<e.length;o++)e[o]===n+1?n=e[o]:(l.push(a===n?t(a):`${t(a)}-${t(n,!1)}`),a=e[o],n=a);return l.push(a===n?t(a):`${t(a)}-${t(n,!1)}`),l.join(", ")}([...new Set(e.split("").filter(Boolean))].map((e=>e.charCodeAt(0))));return t}function _(e,t){let l=e.match(/url\(\s*['"]?(.*?)['"]?\s*\)/g);if(!l)return e;l=l.filter((e=>!e.includes(".eot")));let a=t,n=t.split("/");return l.forEach((t=>{let l=t=t.split(/\(|\)/)[1].replace(/"|'/g,""),o=t.split("../"),s=t.match(/\.\.\//g),r=t.match(/\.\//g),i=s?s.length:0;if(i){let e=-1-i,t=o.slice(-1)[0];a=n.slice(0,e).join("/")+"/",l=a+t}else r&&(l=t.replaceAll("./",a));e=e.replaceAll(t,l)})),e}async function g(r,{addGlobalStyles:g=!0,format:p="original",formatSVG:d="original",quality:v=.9,scaleImages:y=!1,addToolbar:h=!0,showPreview:f=!1,crop:b=!1,useIntrinsic:m=!1,flattenTransparency:w=!1,bgColor:S="transparent"}={}){let x,k,C,A,E,L,M,q,P,j,B,I,T,V,R,F,N,G,U,$,z,O=!1,W=!!(!("string"==typeof r)&&(r instanceof HTMLElement||r instanceof SVGElement))&&"img"===r.nodeName.toLowerCase(),D=r;if(W){let e=await fetch(r.src);e.ok&&(r=await e.text(),g=!1,O=!0)}let H=!r.nodeType;H&&(g=!1),r=H?(new DOMParser).parseFromString(r,"text/html").querySelector("svg"):r;let X,Q=document.createElement("div"),J=r.cloneNode(!0);J.classList.add("savgy_clone","savgy__hidden"),h?(await async function(e="styles",t=!1){let l=(()=>{try{performance.getEntries().slice(1)[0].name.split("/").slice(0,-1).join("/");let e=(new Error).stack.split("\n"),t=e[1]||e[2];return t?t.match(/(https?:\/\/[^\s]+)/)[1].split("/").slice(0,-1).join("/"):null}catch(e){return console.warn("Could not retrieve script path",e),null}})();!l.includes("dist")&&t&&(l+="/dist");let a=l+`/${e}.css`,n=document.getElementById(`${e}_style`);n||(n=document.createElement("link"),n.setAttribute("href",a),n.setAttribute("rel","stylesheet"),n.id=`${e}_style`,document.head.append(n))}("savgy",!0),Q.classList.add("savgy__wrap"),document.body.insertBefore(Q,D),X=document.createElement("img"),X.classList.add("savgy__preview","savgy__preview--hidden"),({toolbar:E,inpW:L,inpH:M,inpQ:q,inpF:P,btnCopy:j,btnSave:B,linkFile:I,inpFSVG:V,inpPreview:T,inputToggle:R,inputIntrinsic:F,inputCrop:N,selectSVGIMGFormat:G,pFilesize:U,inputFlatten:$,inputScaleImages:z}=function(e){let t=`<div class="savgy__toolbar">\n <div class="savgy__toolbar__inner">\n <div class="savgy__toolbar__inputwrap --savgy__toolbar__grd">\n <div class="savgy__toolbar__row savgy__toolbar__row--2">\n <div class="savgy__toolbar__col savgy__grd-label">\n <label class="savgy__toolbar__label savgy__toolbar__label--w">W:</label> \n <input class="savgy__toolbar__input savgy__toolbar__input--w" type="number" value="640">\n </div>\n\n <div class="savgy__toolbar__col savgy__grd-label">\n <label class="savgy__toolbar__label savgy__toolbar__label--h">H:</label> \n <input class="savgy__toolbar__input savgy__toolbar__input--h" type="number" value="480">\n </div>\n </div>\n\n\n <div class="savgy__toolbar__row">\n <div class="savgy__toolbar__col savgy__grd-label">\n <label class="savgy__toolbar__label">Quality:</label> \n <input class="savgy__toolbar__input savgy__toolbar__input--quality" type="number" value="0.9" min="0.1" max="1" step="0.1">\n </div>\n </div>\n\n\n </div>\n <div class="savgy__toolbar__inputwrap">\n <div class="savgy__toolbar__row">\n <div class="savgy__toolbar__col">\n <select class="savgy__toolbar__select savgy__toolbar__select--format">\n <option class="savgy__toolbar__option" value="png">PNG </option>\n <option class="savgy__toolbar__option" value="webp">WebP </option>\n <option class="savgy__toolbar__option" value="jpg">Jpeg </option>\n <option class="savgy__toolbar__option" value="svg">SVG (original)</option>\n <option class="savgy__toolbar__option" value="svg_self">SVG (self-contained)</option>\n </select>\n </div>\n </div>\n\n <div class="savgy__toolbar__row">\n <div class="savgy__toolbar__col">\n <select class="savgy__toolbar__select savgy__toolbar__select--format--img">\n <option class="savgy__toolbar__option" value="original">SVG img format </option>\n <option class="savgy__toolbar__option" value="png">PNG </option>\n <option class="savgy__toolbar__option" value="webp">WebP </option>\n <option class="savgy__toolbar__option" value="jpg">Jpeg </option>\n </select>\n </div>\n </div>\n\n\n <div class="savgy__toolbar__row">\n <div class="savgy__toolbar__col">\n <label class="savgy__toolbar__label savgy__toolbar__label--inline">\n <input type="checkbox" value="1" class="savgy__toolbar__check savgy__toolbar__check--preview">\n Show Preview\n </label>\n <label class="savgy__toolbar__label savgy__toolbar__label--inline">\n <input type="checkbox" value="1" class="savgy__toolbar__check savgy__toolbar__check--intrinsic">\n Intrinsic width/height\n </label>\n <label class="savgy__toolbar__label savgy__toolbar__label--inline">\n <input type="checkbox" value="1" class="savgy__toolbar__check savgy__toolbar__check--crop">\n Crop to content\n </label>\n <label class="savgy__toolbar__label savgy__toolbar__label--inline">\n <input type="checkbox" value="1" class="savgy__toolbar__check savgy__toolbar__check--flatten">\n Flatten transparency\n </label>\n <label class="savgy__toolbar__label savgy__toolbar__label--inline">\n <input type="checkbox" value="1" class="savgy__toolbar__check savgy__toolbar__check--scaleImg">\n Scale SVG images\n </label>\n\n\n </div>\n </div>\n\n\n </div>\n\n <div class="savgy__toolbar__row savgy__toolbar__row--2">\n <div class="savgy__toolbar__col">\n <button type="button" class="savgy__button savgy__toolbar__button savgy__toolbar__button--copy"><span class="savgy__toolbar__button--save--download icn-svg savgy__icon">${e.copy} </span> Copy</button>\n </div>\n <div class="savgy__toolbar__col">\n <button type="button" class="savgy__button--ready savgy__button savgy__toolbar__button savgy__toolbar__button--save"><span class="savgy__toolbar__button--save--download icn-svg savgy__icon savgy__icon--download">${e.download} </span> <span class="savgy__toolbar__button--save--download icn-svg savgy__icon savgy__icon--spinner">${e.spinner} </span> Save file</button>\n <a class="savgy__toolbar__a savgy__toolbar__button--a savgy__hidden" href="" download=""></a>\n </div>\n </div>\n <div class="saveg__filesize__wrp">\n <p class="saveg__filesize">Filesize: 0 KB</p>\n </div>\n\n\n </div>\n\n <div class="savgy__toolbar__toggle">\n <label class="savgy__toolbar__toggle__label">\n <span class="savgy__toolbar__toggle__icon savgy__toolbar__toggle__icon--download savgy__icon savgy__icon--download">${e.download}</span>\n <span class=" savgy__toolbar__toggle__icon savgy__toolbar__toggle__icon--close savgy__icon savgy__icon--close">${e.close}</span>\n <input class="savgy__toolbar__toggle__input savgy__hidden" type="checkbox" value="1">\n </label>\n </div>\n</div>\n`,l=(new DOMParser).parseFromString(t,"text/html").querySelector("div"),a=l.querySelector(".savgy__toolbar__input--w"),n=l.querySelector(".savgy__toolbar__input--h"),o=l.querySelector(".savgy__toolbar__input--quality"),s=l.querySelector(".savgy__toolbar__select--format"),r=l.querySelector(".savgy__toolbar__check--preview"),i=l.querySelector(".savgy__toolbar__select--format--img"),c=l.querySelector(".savgy__toolbar__button--copy"),_=l.querySelector(".savgy__toolbar__button--save"),g=l.querySelector(".savgy__toolbar__button--a"),u=l.querySelector(".savgy__toolbar__toggle__label"),p=l.querySelector(".savgy__toolbar__toggle__input"),d=l.querySelector(".savgy__toolbar__check--intrinsic"),v=l.querySelector(".savgy__toolbar__check--crop"),y=l.querySelector(".savgy__toolbar__check--flatten"),h=l.querySelector(".savgy__toolbar__check--scaleImg"),f=l.querySelector(".savgy__toolbar__select--format--img"),b=l.querySelector(".saveg__filesize");return{toolbar:l,inpW:a,inpH:n,inpQ:o,inpF:s,inpFSVG:i,btnCopy:c,btnSave:_,linkFile:g,inpPreview:r,inputToggleLabel:u,inputToggle:p,inputIntrinsic:d,inputCrop:v,selectSVGIMGFormat:f,pFilesize:b,inputFlatten:y,inputScaleImages:h}}(t)),Q.append(D,J,X,E)):(Q.style="position:relative; height:0px; overflow:hidden; opacity:0",Q.append(J),document.body.append(Q)),S="transparent"!==S?S:function(e){if(!e instanceof HTMLElement&&!e instanceof SVGElement)return"white";function t(e){return e&&"transparent"!==e&&"rgba(0, 0, 0, 0)"!==e?e:null}let l=e;for(;l;){const e=t(window.getComputedStyle(l).backgroundColor);if(e)return e;if(l===document.body)break;l=l.parentElement}return"#fff"}(J);let K=J.getAttribute("viewBox"),Y=K?K.split(/,| /).filter(Boolean).map(Number):[0,0,300,150];[C,A]=J.getAttribute("width")&&J.getAttribute("height")?[+J.width,+J.height]:[Y[2],Y[3]];let Z,[ee,te]=[C,A],le=1;H||(Z=J.getBoundingClientRect(),le=Z.width/C),[C,A]=[C*le,A*le];let[ae,ne]=[C,A],oe=J.getBBox(),[se,re,ie,ce]=[oe.x,oe.y,oe.width,oe.height],_e=C/A;if([C,A]=[C,A].map((e=>+e.toFixed(0))),E){L.value=C,M.value=A,q.value=v,P.value=p||"png";let t=[L,M,q,P,V,N,F,T,$,z];R.addEventListener("click",(async e=>{E.classList.toggle("savgy__toolbar--open"),O=!0}));const l=[L,M],n=[N,F];[...t,...n].forEach((t=>{t.addEventListener("input",(async t=>{const a=t.currentTarget;let o=+L.value,s=+M.value;if(l.includes(a))a===L?s=Math.round(o/_e):a===M&&(o=Math.round(s*_e));else if(n.includes(a)){const e=F.checked?1:le;N.checked?[o,s]=[ie*e,ce*e]:F.checked&&([o,s]=[ee*e,te*e])}o!==+L.value&&(L.value=o),s!==+M.value&&(M.value=s),o==ee&&s==te||(m=!1,F.checked=!1),C=+L.value,A=+M.value,v=+q.value,p=P.value,d=V.value,b=N.checked,m=F.checked,f=T.checked,w=$.checked,y=z.checked;let i=m?1:le,[c,_]=m?[ee*i,te*i]:[C,A];if(G.classList.toggle("savgy__toolbar__select--format--img--active","svg_self"===p),b?([c,_]=[ie*i,ce*i],J.setAttribute("viewBox",[se,re,ie,ce].join(" "))):J.setAttribute("viewBox",Y.join(" ")),[c,_]=[c,_].map((e=>Math.ceil(e))),f){if(W&&(D.style.visibility="hidden"),X.classList.replace("savgy__preview--hidden","savgy__preview--visible"),({dataUrl:x,dataUrlSVG:k}=await u(r,J,e,g,d,c,_,p,v,y,S,w)),X.src=x,x){let e=function(e){if(!e.startsWith("data:"))throw new Error("Invalid data URL format");const[t,l]=e.split(",");if(!t||!l)throw new Error("Invalid data URL format");const a=t.match(/^data:([^;]+)/),n=a?a[1]:"application/octet-stream";let o;o=t.includes("base64")?atob(l):decodeURIComponent(l);const s=new ArrayBuffer(o.length),r=new Uint8Array(s);for(let e=0;e<o.length;e++)r[e]=o.charCodeAt(e);return new Blob([s],{type:n})}(x);U.textContent="Filesize: ~"+ +(e.size/1024).toFixed(2)+" KB"}}else W&&(D.style.visibility="visible"),X.classList.replace("savgy__preview--visible","savgy__preview--hidden")}))})),j.addEventListener("click",(async e=>{let t;j.classList.add("savgy--copying"),"svg"===p?t=(new XMLSerializer).serializeToString(r):"svg_self"===p?t=(new XMLSerializer).serializeToString(J):(x||(x=await a(J,C,A,p,v,S,w)),t=x),navigator.clipboard.writeText(t),j.classList.remove("savgy--copying")})),B.addEventListener("click",(async t=>{B.classList.replace("savgy__button--ready","savgy__button--loading"),f||({dataUrl:x,dataUrlSVG:k}=await u(r,J,e,g,d,ae,ne,p,v,y,S,w));let l=J.id?J.id:"savgy",a=p.replace("image/","").replace("jpeg","jpg").replace("svg_self","svg");I.download=`${l}.${a}`,I.href=x,I.click(),B.classList.replace("savgy__button--loading","savgy__button--ready")}));let o=0;window.addEventListener("resize",(e=>{o=E.getBoundingClientRect().top,console.log("toolbarTop",o),o<0?E.classList.add("savgy__toolbar--bottom"):E.classList.remove("savgy__toolbar--bottom")})),window.addEventListener("DOMContentLoaded",(e=>{o=E.getBoundingClientRect().top,console.log("toolbarTop",E,o,E.getBoundingClientRect()),o<0&&E.classList.add("savgy__toolbar--bottom")}))}else O||(J=await async function(e,t={},a=!0){async function r(e){const t=(new TextEncoder).encode(e),l=await crypto.subtle.digest("SHA-256",t);return Array.from(new Uint8Array(l)).map((e=>e.toString(16).padStart(2,"0"))).join("")}let g=await r(e);if(t.svg[g])return t.svg[g];let u="";await async function(e,t={}){let l=e.querySelectorAll("use");if(!l.length)return;const a="http://www.w3.org/1999/xlink";let n=e.querySelector("defs");n||(n=document.createElementNS("http://www.w3.org/2000/svg","defs"),e.insertBefore(n,e.children[0]));for(let o=0;o<l.length;o++){let s=l[o],r=s.getAttributeNS(a,"href")?s.getAttributeNS(a,"href"):s.getAttribute("href");s.removeAttribute("xlink:href");let i,c,_,g=r.split("#").filter(Boolean),[u,p]=g,d=g.length>1,v=document.getElementById(g[0]);if(v)c=v.cloneNode(!0),n.append(c),i=`#${g[0]}`,s.setAttribute("href",i);else if(d){let l=u.replace(/\./g,"_");if(t[u]&&t[u][p])c=t[u][p].cloneNode(!0);else{let e=await fetch(u);if(e.ok){let l=await e.text(),a=(new DOMParser).parseFromString(l,"text/html").querySelector("svg").getElementById(p);t[u]={},t[u][p]=a,c=a.cloneNode(!0)}}_=`${l}_${p}`,c.id=_,e.getElementById(_)||n.append(c),s.setAttribute("href",`#${_}`)}}}(e,t),function(e){let t=e.querySelectorAll("path, polyline, polygon, rect, circle, ellipse, line, text, tspan"),l=["fill","stroke","clip-path","mask","href","xlink:href"],a=e.querySelector("defs");a||(a=document.createElementNS(ns,"defs"),e.insertBefore(a,e.children[0]));for(let o=0;o<t.length;o++){let s,r,i,c=t[o],_=window.getComputedStyle(c);for(let t=0;t<l.length;t++){let o=l[t],g=c.getAttribute(o)||_.getPropertyValue(o),u="href"===o||"xlink:href"===o;if(g.includes("url")||u){if(s=u?g.substring(1):n(g).substring(1),r=s?e.getElementById(s):null,r)continue;r=s?document.getElementById(s):null,r&&(i=r.cloneNode(!0),a.append(i))}}}function n(e){let t=/url\((['"]?)([^'"()]+)\1\)/gi;return e.match(t)?e.match(t)[0].split(/\(|\)/)[1].replace(/"|'/g,""):""}}(e,t),await async function(e,t={}){let a=e.querySelectorAll("image, img"),n="http://www.w3.org/1999/xlink";await Promise.all([...a].map((async e=>{let a,o=e.nodeName.toLowerCase(),s=e.getAttributeNS(n,"href")?e.getAttributeNS(n,"href"):"image"===o?e.getAttribute("href"):e.getAttribute("src");if(t.images[s])a=t.images[s];else if(s.startsWith("data:"))a=s;else{let e=await(await fetch(s)).blob();a=await l(e),t.images[s]=a}"image"===o?e.setAttribute("href",a):e.setAttribute("src",a)})))}(e,t);let p=function(e){let t={},l={},a=e.querySelectorAll("text, tspan, textPath, foreignObject *"),n=[...new Set([...[...a].map((e=>e.textContent)).join("").split("")])].join("");if(!a.length)return t;for(let e=0,n=a.length;n&&e<n;e++){let n=a[e],o=[...n.childNodes].filter((e=>3===e.nodeType&&e.textContent.trim()));if(!o.length)continue;let s=window.getComputedStyle(n),[r,_,g,u]=[s.getPropertyValue("font-family"),s.getPropertyValue("font-weight"),s.getPropertyValue("font-style"),s.getPropertyValue("font-stretch")||"100"];r=r.replace(/"|'| |%/g,"");let p=o.map((e=>e.textContent)).join("").trim(),d=[...new Set([...p.split("")])].join("").replaceAll("\n",""),v=i(c(d));"PUA"===v&&(v="latin");let y=[r,_,g,u,v].join("_").replace(/"|'| |%/g,"");t[y]||(t[y]=[]),l[r]||(l[r]=[]),l[r].push(d)}for(let e in t){let a=e.split("_")[0];t[e]=[...new Set(l[a].join("").split(""))].join("")}return t.allText=n,t}(e);if(a){let l=function(){let e=[],t=document.styleSheets,l=window.location.origin;for(const a of t){let t=a.href?new URL(a.href).origin:l;if(t===l)try{for(const t of a.cssRules)t instanceof CSSImportRule&&e.push(t.href)}catch(e){console.warn(`Cannot read rules from stylesheet: ${a.href||"inline <style>"}`,t)}}return e=[...new Set([...e])],e}();await async function(e=[]){for(let t=0,l=e.length;l&&t<l;t++){let l=e[t],a=document.createElement("link");a.href=l,a.rel="stylesheet",a.classList.add("internalCSS"),document.head.append(a),await new Promise((e=>{a.onload=e,a.onerror=e}))}}(l),a&&(u+=await async function(e,t={},l={}){l.css||(l.css={});let a="",r=document.styleSheets;for(let i of r){const r=i.ownerNode;if(!r||!r.closest("svg")){if(i.href){let e,a=i.href,r=a.includes("fonts.google"),c=[],g=!1;if(l.css[a])e=l.css[a].css,c=l.css[a].subsets||[],g=l.css[a].hasMulti||!1;else try{let t=await fetch(a);if(t.ok){e=await t.text();let n=/@import\s+(?:url\()?["']?([^"')]+)["']?\)?[^;]*;?/gi;if((e.match(n)||[]).forEach((t=>{e=e.replace(t,"")})),e=_(e,a),r){let t=[...e.matchAll(/\/\*\s*(.*?)\s*\*\//g)];c=t?t.map((e=>e[1])):[],g=a.split("family=").slice(1).length>1}l.css[a]={css:e,subsets:c,hasMulti:g,isGoogleFont:r}}}catch(e){console.error(`Error fetching stylesheet ${a}:`,e);continue}if(!e)continue;let u=new CSSStyleSheet;u.replaceSync(e);let p=o(u,c);s(p,t);let{exclude:d,fontsToSubset:v}=n(u,t,r,c,"",g,p);if(v.length&&r){let o=v[0],s=g?t.allText:t[o],i=a+"&text="+encodeURIComponent(s);if(l.css[i])e=l.css[i].css,u=new CSSStyleSheet,u.replaceSync(e);else try{let a=await fetch(i);if(a.ok){let o=await a.text();l.css[i]={css:o,isSubset:!0},e=o,u=new CSSStyleSheet,u.replaceSync(e);let s="latin";({exclude:d,fontsToSubset:v}=n(u,t,r,c,s,g,p))}}catch(e){console.error(`Error fetching font subset ${i}:`,e)}}for(let e=d.length,t=e-1;e&&t>=0;t--){let e=d[t];u.cssRules[e]&&u.deleteRule(e)}i=u}if(i.cssRules.length)for(let t=0,l=i.cssRules.length;l&&t<l;t++){let l=i.cssRules[t];if(1===l.type){let t=l.selectorText;if(!e.querySelector(t))continue}a+=l.cssText+"\n\n"}}}return a}(e,p,t))}let d=e.querySelector("style");return u+=d.textContent,u=await async function(e,t={}){t.fonts||(t.fonts={});let a=new CSSStyleSheet;a.replaceSync(e);let n=[...a.cssRules].filter((e=>5===e.type)).map((e=>{let t=e.style.getPropertyValue("src");return t?t.split(",").map((e=>e.trim())):[]})),o=[];if(n.forEach((t=>{if(!t||!t.length)return;let l=[],a=[],n=t.join(", ");if(t.forEach((t=>{if(!t||"undefined"===t)return;let n=t.split("/").slice(-1)[0].split("?")[0].split(".").slice(-1)[0];if("eot"===n||"svg"===n)e=e.replaceAll(t,"");else{a.push(t);let e=t.replace(/url\(|\)|'|"/gi,"").split(" ")[0];e&&"undefined"!==e&&l.push(e)}})),a.length){let t=a.join(", ");e=e.replace(n,t)}l[0]&&o.push(l[0])})),!o.length)return e;const s=await Promise.all(o.map((async e=>{if(!e||e.startsWith("data:"))return{url:e,base64:e};try{if(t.fonts[e])return{url:e,base64:t.fonts[e]};const a=await fetch(e);if(!a.ok)throw new Error(`Fetch failed with status ${a.status}`);const n=await a.blob(),o=await l(n);return t.fonts[e]=o,{url:e,base64:o}}catch(t){return console.error(`Error processing font ${e}:`,t),{url:e,base64:e}}})));let r=e;for(const{url:e,base64:t}of s)e&&(r=r.replaceAll(e,t));return r}(u,t),d.textContent=u,t.svg[g]=e,e}(J,e,g)),O=!0,({dataUrl:x,dataUrlSVG:k}=await u(r,J,e,g,d,C,A,p,v,y,S,w));return{bmp:x,svg:k}}async function u(e,t,l,n,o,s,r,i,c,_,g="#fff",u=!1){let p,d;if("svg"===i)p="data:image/svg+xml; charset=utf8, "+encodeURIComponent((new XMLSerializer).serializeToString(e)),d=p;else if("svg_self"===i){let e=await async function(e,t={},l=!0,a=null,n=null,o="original",s=1,r=!0){let i=e.cloneNode(!0),c=i.querySelectorAll("image, img"),_="http://www.w3.org/1999/xlink";return c.length&&"original"!==o?(o=o?o.replace(/image\//g,"").replace(/jpg/g,"jpeg"):"original",await Promise.all([...c].map((async e=>{let t=e.nodeName.toLowerCase(),l=e.getAttributeNS(_,"href")?e.getAttributeNS(_,"href"):"image"===t?e.getAttribute("href"):e.getAttribute("src");if("original"!==o){let t=document.createElement("canvas"),a=t.getContext("2d"),n=new Image;n.crossOrigin="anonymous",n.src=l,await n.decode();let[c,_]=[n.naturalWidth,n.naturalHeight],[g,u]=[+e.getAttribute("width")||c,+e.getAttribute("height")||_];if(r&&([c,_]=[g,u]),n.width=c,n.height=_,t.width=c,t.height=_,"jpeg"===o){let e=window.getComputedStyle(i).backgroundColor;"rgba(0, 0, 0, 0)"!==e&&"transparent"===e||(a.fillStyle="#ffffff",a.fillRect(0,0,c,_))}await a.drawImage(n,0,0,c,_),l=t.toDataURL(`image/${o}`,s),t.remove()}"image"===t?e.setAttribute("href",l):e.setAttribute("src",l)}))),i):i}(t,l,n,s,r,o,c,_);p="data:image/svg+xml; charset=utf8, "+encodeURIComponent((new XMLSerializer).serializeToString(e)),d=p}else p=await a(t,s,r,i,c,g,u);return{dataUrl:p,dataUrlSVG:d}}function p(e="",{addGlobalStyles:t=!0,format:l="webp",formatSVG:a="original",quality:n=.9,scaleImages:o=!1,addToolbar:s=!0,showPreview:r=!1,crop:i=!1,useIntrinsic:c=!1,flattenTransparency:_=!1,bgColor:u="transparent"}={}){let p={addGlobalStyles:t,format:l,formatSVG:a,quality:n,scaleImages:o,addToolbar:s,showPreview:r,crop:i,useIntrinsic:c,flattenTransparency:_,bgColor:u},d=Array.isArray(e)?e:[e],v=[];for(let e=0,t=d.length;t&&e<t;e++){let t=d[e],l="string"==typeof t;l&&document.querySelectorAll(t).length;let a=!!l&&t.trim().startsWith("<svg "),n=!l&&(t instanceof HTMLElement||t instanceof SVGElement);n&&t.nodeName.toLowerCase();let o=n?t:a?(new DOMParser).parseFromString(o,"text/html").querySelector("svg"):"";o&&v.push(o),g(o,p)}return this.svgs=v,this}"undefined"!=typeof window&&(window.savgy=p);export{p as savgy};