diff --git a/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.html b/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.html index 8e53194..4f207b5 100644 --- a/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.html +++ b/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.html @@ -19,9 +19,12 @@ user-select: none; } - #svgWrapper { + #svgWrapper img { transform-origin: center center; transition: transform 0.1s ease-out; + display: block; + max-width: 100%; + max-height: 100%; } diff --git a/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js b/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js index 2a53c59..0946a2f 100644 --- a/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js +++ b/QuickLook.Plugin/QuickLook.Plugin.ImageViewer/Resources/svg2html.js @@ -1,14 +1,44 @@ (async function () { + function encodeSvgToBase64(svg) { + const utf8Bytes = new TextEncoder().encode(svg); + let binary = ''; + for (const byte of utf8Bytes) { + binary += String.fromCharCode(byte); + } + return btoa(binary); + } + + function fixSvgSize(svg) { + const viewBoxMatch = svg.match(/viewBox\s*=\s*["']?([\d\s\.]+)["']/i); + if (!viewBoxMatch) return svg; + + const parts = viewBoxMatch[1].trim().split(/\s+/); + if (parts.length !== 4) return svg; + + const width = parseFloat(parts[2]); + const height = parseFloat(parts[3]); + + if (/width\s*=/.test(svg) || /height\s*=/.test(svg)) { + return svg; + } + + return svg.replace( + /]*)>/i, + `` + ); + } + const wrapper = document.getElementById("svgWrapper"); - const svgString = await chrome.webview.hostObjects.external.GetSvgContent(); - - wrapper.innerHTML = svgString; + const base64 = encodeSvgToBase64(fixSvgSize(svgString)); + const img = new Image(); + img.src = `data:image/svg+xml;base64,${base64}`; + img.style.transform = "scale(1)"; let scale = 1; function updateTransform() { - wrapper.style.transform = `scale(${scale})`; + img.style.transform = `scale(${scale})`; } document.addEventListener("wheel", (e) => { @@ -16,12 +46,7 @@ const scaleFactor = 1.2; - if (e.deltaY < 0) { - scale *= scaleFactor; - } else { - scale /= scaleFactor; - } - + scale *= (e.deltaY < 0 ? scaleFactor : 1 / scaleFactor); updateTransform(); }, { passive: false }); @@ -31,5 +56,6 @@ updateTransform(); }); + wrapper.appendChild(img); updateTransform(); })();