savgy
Version:
Get self-contained SVGs or bitmaps from SVG
2 lines (1 loc) • 28.2 kB
JavaScript
!function(e){"use strict";function t(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 l(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 a(e,t={},l=!1,a=[],n="",o=!1,r={}){let i=[],c=[];for(let o=0,r=e.cssRules.length;r&&o<r;o++){let r=e.cssRules[o];if(5===r.type){let[e,_,g,u]=[r.style.getPropertyValue("font-family").replace(/"|'| /g,""),r.style.getPropertyValue("font-weight")||"400",r.style.getPropertyValue("font-style")||"normal",r.style.getPropertyValue("font-stretch")||"100"],p=n||(a[o]?a[o]:"latin");_=_.split(" ").map((e=>s(e,"weight"))),u=u.split(" ").map((e=>s(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 n(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,r,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}),r=r.split(" ").map((e=>s(e,"weight"))),c=c.split(" ").map((e=>s(e,"stretch"))).filter(Boolean);let g=r.length>1||c.length>1;r.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 o(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)}c==n&&e===s||(t[[a,c,o,e,r].join("_")]=t[l],delete t[l])}}return t}function s(e,t="weight"){return isNaN(e)?(e=e.trim().toLowerCase(),"stretch"===t?e.includes("%")?parseFloat(e):{"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:"weight"===t?{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:void 0):parseFloat(e)}function r(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]})),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 i(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 c(e,{addGlobalStyles:s=!0,format:c="original",formatSVG:g="original",quality:d=.9,scaleImages:v=!1,addToolbar:y=!0,showPreview:h=!1,crop:b=!1,useIntrinsic:f=!1,flattenTransparency:m=!1,bgColor:w="transparent"}={}){let S,x,k,A,C,E,L,M,q,P,j,I,B,V,T,F,R,N,G,U,z,$=!1,O=!("string"==typeof e||!(e instanceof HTMLElement||e instanceof SVGElement))&&"img"===e.nodeName.toLowerCase(),W=e;if(O){let t=await fetch(e.src);t.ok&&(e=await t.text(),s=!1,$=!0)}let D=!e.nodeType;D&&(s=!1),e=D?(new DOMParser).parseFromString(e,"text/html").querySelector("svg"):e;let H,X=document.createElement("div"),Q=e.cloneNode(!0);Q.classList.add("savgy_clone","savgy__hidden"),y?(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 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),X.classList.add("savgy__wrap"),document.body.insertBefore(X,W),H=document.createElement("img"),H.classList.add("savgy__preview","savgy__preview--hidden"),({toolbar:C,inpW:E,inpH:L,inpQ:M,inpF:q,btnCopy:P,btnSave:j,linkFile:I,inpFSVG:V,inpPreview:B,inputToggle:T,inputIntrinsic:F,inputCrop:R,selectSVGIMGFormat:N,pFilesize:G,inputFlatten:U,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"),b=l.querySelector(".savgy__toolbar__select--format--img"),f=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:b,pFilesize:f,inputFlatten:y,inputScaleImages:h}}(p)),X.append(W,Q,H,C)):(X.style="position:relative; height:0px; overflow:hidden; opacity:0",X.append(Q),document.body.append(X)),w="transparent"!==w?w:function(e){if(!e instanceof HTMLElement&&!e instanceof SVGElement)return"white";let t=e;for(;t;){const e=(l=window.getComputedStyle(t).backgroundColor)&&"transparent"!==l&&"rgba(0, 0, 0, 0)"!==l?l:null;if(e)return e;if(t===document.body)break;t=t.parentElement}var l;return"#fff"}(Q);let J=Q.getAttribute("viewBox"),K=J?J.split(/,| /).filter(Boolean).map(Number):[0,0,300,150];[k,A]=Q.getAttribute("width")&&Q.getAttribute("height")?[+Q.width,+Q.height]:[K[2],K[3]];let Y,[Z,ee]=[k,A],te=1;D||(Y=Q.getBoundingClientRect(),te=Y.width/k),[k,A]=[k*te,A*te];let[le,ae]=[k,A],ne=Q.getBBox(),[oe,se,re,ie]=[ne.x,ne.y,ne.width,ne.height],ce=k/A;if([k,A]=[k,A].map((e=>+e.toFixed(0))),C){E.value=k,L.value=A,M.value=d,q.value=c||"png";let t=[E,L,M,q,V,R,F,B,U,z];T.addEventListener("click",(async e=>{C.classList.toggle("savgy__toolbar--open"),$=!0}));const a=[E,L],n=[R,F];[...t,...n].forEach((t=>{t.addEventListener("input",(async t=>{const l=t.currentTarget;let o=+E.value,r=+L.value;if(a.includes(l))l===E?r=Math.round(o/ce):l===L&&(o=Math.round(r*ce));else if(n.includes(l)){const e=F.checked?1:te;R.checked?[o,r]=[re*e,ie*e]:F.checked&&([o,r]=[Z*e,ee*e])}o!==+E.value&&(E.value=o),r!==+L.value&&(L.value=r),o==Z&&r==ee||(f=!1,F.checked=!1),k=+E.value,A=+L.value,d=+M.value,c=q.value,g=V.value,b=R.checked,f=F.checked,h=B.checked,m=U.checked,v=z.checked;let i=f?1:te,[p,y]=f?[Z*i,ee*i]:[k,A];if(N.classList.toggle("savgy__toolbar__select--format--img--active","svg_self"===c),b?([p,y]=[re*i,ie*i],Q.setAttribute("viewBox",[oe,se,re,ie].join(" "))):Q.setAttribute("viewBox",K.join(" ")),[p,y]=[p,y].map((e=>Math.ceil(e))),h){if(O&&(W.style.visibility="hidden"),H.classList.replace("savgy__preview--hidden","savgy__preview--visible"),({dataUrl:S,dataUrlSVG:x}=await _(e,Q,u,s,g,p,y,c,d,v,w,m)),H.src=S,S){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})}(S);G.textContent="Filesize: ~"+ +(e.size/1024).toFixed(2)+" KB"}}else O&&(W.style.visibility="visible"),H.classList.replace("savgy__preview--visible","savgy__preview--hidden")}))})),P.addEventListener("click",(async t=>{let a;P.classList.add("savgy--copying"),"svg"===c?a=(new XMLSerializer).serializeToString(e):"svg_self"===c?a=(new XMLSerializer).serializeToString(Q):(S||(S=await l(Q,k,A,c,d,w,m)),a=S),navigator.clipboard.writeText(a),P.classList.remove("savgy--copying")})),j.addEventListener("click",(async t=>{j.classList.replace("savgy__button--ready","savgy__button--loading"),h||({dataUrl:S,dataUrlSVG:x}=await _(e,Q,u,s,g,le,ae,c,d,v,w,m));let l=Q.id?Q.id:"savgy",a=c.replace("image/","").replace("jpeg","jpg").replace("svg_self","svg");I.download=`${l}.${a}`,I.href=S,I.click(),j.classList.replace("savgy__button--loading","savgy__button--ready")}));let o=0;window.addEventListener("resize",(e=>{o=C.getBoundingClientRect().top,o<0?C.classList.add("savgy__toolbar--bottom"):C.classList.remove("savgy__toolbar--bottom")})),window.addEventListener("DOMContentLoaded",(e=>{o=C.getBoundingClientRect().top,o<0&&C.classList.add("savgy__toolbar--bottom")}))}else $||(Q=await async function(e,l={},s=!0){let c=await async function(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("")}(e);if(l.svg[c])return l.svg[c];let _="";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,l),function(e){function t(e){let t=/url\((['"]?)([^'"()]+)\1\)/gi;return e.match(t)?e.match(t)[0].split(/\(|\)/)[1].replace(/"|'/g,""):""}let l=e.querySelectorAll("path, polyline, polygon, rect, circle, ellipse, line, text, tspan"),a=["fill","stroke","clip-path","mask","href","xlink:href"],n=e.querySelector("defs");n||(n=document.createElementNS(ns,"defs"),e.insertBefore(n,e.children[0]));for(let o=0;o<l.length;o++){let s,r,i,c=l[o],_=window.getComputedStyle(c);for(let l=0;l<a.length;l++){let o=a[l],g=c.getAttribute(o)||_.getPropertyValue(o),u="href"===o||"xlink:href"===o;if(g.includes("url")||u){if(s=u?g.substring(1):t(g).substring(1),r=s?e.getElementById(s):null,r)continue;r=s?document.getElementById(s):null,r&&(i=r.cloneNode(!0),n.append(i))}}}}(e),await async function(e,l={}){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(l.images[s])a=l.images[s];else if(s.startsWith("data:"))a=s;else{let e=await(await fetch(s)).blob();a=await t(e),l.images[s]=a}"image"===o?e.setAttribute("href",a):e.setAttribute("src",a)})))}(e,l);let g=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),[i,c,_,g]=[s.getPropertyValue("font-family"),s.getPropertyValue("font-weight"),s.getPropertyValue("font-style"),s.getPropertyValue("font-stretch")||"100"];i=i.replace(/"|'| |%/g,"");let u=o.map((e=>e.textContent)).join("").trim(),p=[...new Set([...u.split("")])].join("").replaceAll("\n",""),d=r(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(p.split("").filter(Boolean))].map((e=>e.charCodeAt(0)))));"PUA"===d&&(d="latin");let v=[i,c,_,g,d].join("_").replace(/"|'| |%/g,"");t[v]||(t[v]=[]),l[i]||(l[i]=[]),l[i].push(p)}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(s){let t=function(){let e=[],t=document.styleSheets,l=window.location.origin;for(const a of t)if((a.href?new URL(a.href).origin:l)===l)try{for(const t of a.cssRules)t instanceof CSSImportRule&&e.push(t.href)}catch(e){}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}))}}(t),s&&(_+=await async function(e,t={},l={}){l.css||(l.css={});let s="",r=document.styleSheets;for(let c of r){const r=c.ownerNode;if(!r||!r.closest("svg")){if(c.href){let e,s=c.href,r=s.includes("fonts.google"),_=[],g=!1;if(l.css[s])e=l.css[s].css,_=l.css[s].subsets||[],g=l.css[s].hasMulti||!1;else try{let t=await fetch(s);if(t.ok){e=await t.text();let a=/@import\s+(?:url\()?["']?([^"')]+)["']?\)?[^;]*;?/gi;if((e.match(a)||[]).forEach((t=>{e=e.replace(t,"")})),e=i(e,s),r){let t=[...e.matchAll(/\/\*\s*(.*?)\s*\*\//g)];_=t?t.map((e=>e[1])):[],g=s.split("family=").slice(1).length>1}l.css[s]={css:e,subsets:_,hasMulti:g,isGoogleFont:r}}}catch(e){continue}if(!e)continue;let u=new CSSStyleSheet;u.replaceSync(e);let p=n(u,_);o(p,t);let{exclude:d,fontsToSubset:v}=a(u,t,r,_,"",g,p);if(v.length&&r){let n=v[0],o=g?t.allText:t[n],i=s+"&text="+encodeURIComponent(o);if(l.css[i])e=l.css[i].css,u=new CSSStyleSheet,u.replaceSync(e);else try{let n=await fetch(i);if(n.ok){let o=await n.text();l.css[i]={css:o,isSubset:!0},e=o,u=new CSSStyleSheet,u.replaceSync(e);let s="latin";({exclude:d,fontsToSubset:v}=a(u,t,r,_,s,g,p))}}catch(e){}}for(let e=d.length,t=e-1;e&&t>=0;t--){let e=d[t];u.cssRules[e]&&u.deleteRule(e)}c=u}if(c.cssRules.length)for(let t=0,l=c.cssRules.length;l&&t<l;t++){let l=c.cssRules[t];if(1===l.type){let t=l.selectorText;if(!e.querySelector(t))continue}s+=l.cssText+"\n\n"}}}return s}(e,g,l))}let u=e.querySelector("style");return _+=u.textContent,_=await async function(e,l={}){l.fonts||(l.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(l.fonts[e])return{url:e,base64:l.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 t(n);return l.fonts[e]=o,{url:e,base64:o}}catch(t){return{url:e,base64:e}}})));let r=e;for(const{url:e,base64:t}of s)e&&(r=r.replaceAll(e,t));return r}(_,l),u.textContent=_,l.svg[c]=e,e}(Q,u,s)),$=!0,({dataUrl:S,dataUrlSVG:x}=await _(e,Q,u,s,g,k,A,c,d,v,w,m));return{bmp:S,svg:x}}async function _(e,t,a,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,a,n,s,r,o,c,_);p="data:image/svg+xml; charset=utf8, "+encodeURIComponent((new XMLSerializer).serializeToString(e)),d=p}else p=await l(t,s,r,i,c,g,u);return{dataUrl:p,dataUrlSVG:d}}function g(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:_=!1,flattenTransparency:g=!1,bgColor:u="transparent"}={}){let p={addGlobalStyles:t,format:l,formatSVG:a,quality:n,scaleImages:o,addToolbar:s,showPreview:r,crop:i,useIntrinsic:_,flattenTransparency:g,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),c(o,p)}return this.svgs=v,this}const u={fonts:{},images:{},css:{},svg:{}},p={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>'};"undefined"!=typeof window&&(window.savgy=g),e.savgy=g}(this.savgy=this.savgy||{});