(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{57856:function(t,e,n){"use strict";var o=n(11720),i=n(61193),r=n.n(i),s=n(38415),a=n(94184),u=n.n(a),g=n(36299),l=n.n(g),d=n(97997);e.Z=t=>{const{imageSourceLink:e}=(0,o.useContext)(s.SVGContext),{0:n,1:i}=(0,o.useState)(0),{0:a,1:g}=(0,o.useState)(0),c=o.default.useRef(null),{shouldDownload:v,downloadFile:p}=t,m=(0,o.useMemo)((()=>{try{const e=new DOMParser,n=t.svgText.replace(/\<(\?xml|(\!DOCTYPE[^\>\[]+(\[[^\]]+)?))+[^>]+\>/g,""),o=e.parseFromString("<div>".concat(n,"</div>"),"image/svg+xml"),i=o.documentElement,r=Array.from(o.querySelectorAll("*"));r.shift();const s=[];return document.body.appendChild(i),r.forEach((t=>{if(t instanceof SVGGraphicsElement&&"svg"!==t.tagName.toLowerCase()){const e=t.getBBox();s.push({x:e.x,y:e.y,width:e.width,height:e.height})}else s.push(void 0)})),i.remove(),{doc:i,nodeList:r,bboxList:s}}catch(e){return void console.warn("Could not parse svg string",e)}}),[t.svgText]);(0,o.useEffect)((()=>{v&&p(t.svgText)}),[v,p,t.svgText]);const h=(t,e)=>{i(n+e.deltaX),g(a+e.deltaY)},w={x:n,y:a};return(0,d.tZ)("div",{className:u()(l().outputContainer,""===t.viewBackground&&l().hasViewBackground),style:{"--props-viewBackground":t.viewBackground},children:(0,d.tZ)("div",{className:l().svgOuterContainer,style:{"--props-zoom":t.zoom},children:t.isSvgEdited||!(()=>{let e=t.svgText.includes('xmlns="http://www.w3.org/2000/svg"');return t.svgText.includes("xlink")&&!t.svgText.includes('xmlns:xlink="http://www.w3.org/1999/xlink"')&&(e=!1),e})()?(0,d.tZ)(r(),{scale:t.zoom,onDrag:h,position:w,nodeRef:c,children:(0,d.tZ)("div",{id:"svgContainer",className:l().svgContainer,ref:c,dangerouslySetInnerHTML:{__html:((t,e)=>{let n=t;if(void 0!==e&&void 0!==m){const t=m.bboxList[e],r=m.nodeList[e];if(void 0!==t&&null!==r){var o,i;const e=document.createElementNS("http://www.w3.org/2000/svg","rect"),s=2;e.setAttribute("id","uniqueOutlineRect"),e.setAttribute("x",(t.x-s/2).toString()),e.setAttribute("y",(t.y-s/2).toString()),e.setAttribute("width",(t.width+s).toString()),e.setAttribute("height",(t.height+s).toString()),e.setAttribute("fill","rgba(0, 0, 255, 0.20)");const a=r.getAttribute("transform");a&&e.setAttribute("transform",a),null===(o=r.parentNode)||void 0===o||o.appendChild(e);n=(new XMLSerializer).serializeToString(m.doc),null===(i=r.parentNode)||void 0===i||i.removeChild(e)}}return n})(t.svgText,t.svgElementSelectedIndex).replace('data-name="&lt;Transparent Rectangle&gt;"',"")},style:{"--props-zoom":t.zoom}})}):(0,d.tZ)(r(),{scale:t.zoom,onDrag:h,position:w,nodeRef:c,children:(0,d.tZ)("div",{id:"svgContainer",ref:c,className:u()(l().svgContainer,t.svgPage&&l().svgContainerPage),children:(0,d.tZ)("img",{draggable:"false",src:e,title:t.svgTitle||"SVG Image",alt:t.svgTitle||"SVG Image"})})})})})}},73639:function(t,e,n){"use strict";n.r(e);n(11720);var o=n(21111),i=n(73319),r=n(9008),s=n.n(r),a=n(44250),u=n(57856),g=n(97997);e.default=()=>(0,g.BX)(i.Z,{name:"Homepage",children:[(0,g.BX)(s(),{children:[(0,g.tZ)("title",{children:"SVG Viewer - View, edit, and optimize SVGs"}),(0,g.tZ)("meta",{property:"og:title",content:"SVG Viewer"})]}),(0,g.tZ)(o.Z,{isValid:!0,outputType:a.Z.preview,OutputComponent:u.Z,isAutoSvgPage:!0})]})},48312:function(t,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return n(73639)}])},36299:function(t){t.exports={outputContainer:"output-type-svg_outputContainer__GWNIs",hasViewBackground:"output-type-svg_hasViewBackground__g0FBW",svgOuterContainer:"output-type-svg_svgOuterContainer__4JqDV",svgContainer:"output-type-svg_svgContainer__N7_vC",svgContainerPage:"output-type-svg_svgContainerPage__E8xbb",zoomContainer:"output-type-svg_zoomContainer__M9AAT",zoomText:"output-type-svg_zoomText__byooc"}}},function(t){t.O(0,[762,966,889,193,271,774,888,179],(function(){return e=48312,t(t.s=e);var e}));var e=t.O();_N_E=e}]);