SVG Auto-Square-Fit & Download Bookmarklet

-svg-auto-square-fit-download-bookmarklet.md

SVG Auto-Square-Fit & Download Bookmarklet

This convenient bookmarklet automatically adjusts an SVG file loaded directly in the browser to be centered in a square viewBox, adds a configurable margin around the content, and initiates a quick download of the modified SVG.

🚀 Usage

• Open a standalone SVG file directly in your browser.
• Click the bookmarklet.
• When prompted, enter your desired margin in pixels.
• The modified SVG will be downloaded automatically, named after your original file.

🛠 Files included:

• bookmarklet.js: Readable source code of the bookmarklet.
• bookmarklet.min.js: Minified bookmarklet ready to drag onto your bookmark bar.

✅ How to Install Bookmarklet:

Because GitHub doesn't allow direct dragging from README files, follow these simple steps to manually add the bookmarklet:

1. Copy the minified JavaScript code from bookmarklet.min.js.
2. In your browser, right-click on your bookmarks bar and choose "Add Page" (or use "Add bookmark").
3. Paste the copied JavaScript code directly into the "URL" field.
4. Name it (e.g., "SVG Square-Fit 📐") and save the bookmark.

⚙️ Customization:

• Margin is prompted dynamically at runtime.

bookmarklet.js

(function(){
  function resizeSvg(svgEl, margin) {
    const bbox = svgEl.getBBox();
    const maxDim = Math.max(bbox.width, bbox.height);
    const newX = bbox.x - margin - (maxDim - bbox.width) / 2;
    const newY = bbox.y - margin - (maxDim - bbox.height) / 2;
    const newSize = maxDim + 2 * margin;
    svgEl.setAttribute('viewBox', `${newX} ${newY} ${newSize} ${newSize}`);
  }

  function downloadSvg(svgEl, filename) {
    const serializer = new XMLSerializer();
    const svgString = serializer.serializeToString(svgEl);
    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
    const url = URL.createObjectURL(blob);

    const htmlLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    htmlLink.href = url;
    htmlLink.download = filename;

    svgEl.appendChild(htmlLink);
    htmlLink.click();
    svgEl.removeChild(htmlLink);

    URL.revokeObjectURL(url);
  }

  const svgEl = document.documentElement;
  let margin = prompt("Enter desired margin (in px):", "20");
  margin = parseFloat(margin);
  if (isNaN(margin) || margin < 0) {
    alert("Invalid margin entered. Operation cancelled.");
    return;
  }

  const originalFilename = (location.pathname.split('/').pop() || 'modified.svg')
                              .replace(/(\.svg)?$/, '-adjusted.svg');

  resizeSvg(svgEl, margin);
  downloadSvg(svgEl, originalFilename);
})();

bookmarklet.min.js

javascript:(function(){const e=document.documentElement;let t=prompt('Margin in px:','20');t=parseFloat(t);if(isNaN(t)||t<0){alert('Invalid margin');return}const n=e.getBBox(),o=Math.max(n.width,n.height),a=n.x-t-(o-n.width)/2,i=n.y-t-(o-n.height)/2,r=o+2*t;e.setAttribute('viewBox',`${a} ${i} ${r} ${r}`);const l=new XMLSerializer,s=l.serializeToString(e),c=new Blob([s],{type:'image/svg+xml;charset=utf-8'}),d=URL.createObjectURL(c),m=document.createElementNS('http://www.w3.org/1999/xhtml','a');m.href=d,m.download=(location.pathname.split('/').pop()||'modified.svg').replace(/(\.svg)?$/,'-adjusted.svg'),e.appendChild(m),m.click(),e.removeChild(m),URL.revokeObjectURL(d)})();