search

tigt / mini-svg-data-uri

Small, efficient encoding of SVG data URIs for CSS, HTML, etc.
https://npm.runkit.com/mini-svg-data-uri
MIT License
309 stars 16 forks source link

Works in link only after pressing Enter #18

Closed DawnPaladin closed 3 years ago

DawnPaladin commented 3 years ago

Hello! I'm using mini-svg-data-uri to cram an SVG into a link. My code looks like this:

var argMap = response.svg;

// remove linebreaks and comments from inside the SVG, as these tend to break it
argMap = argMap.replace(/\r?\n|\r/g,""); // remove linebreaks
argMap = argMap.replace(/<!--[\s\S]*?-->/g, ""); // remove comments

argMap = svgToMiniDataURI(argMap);

const mapIcon = '<span class="wikiglyph wikiglyph-map" aria-hidden="true"></span>';
const mapButton = `<a href="${argMap}" target="_blank">` + mapIcon + '</a>';

When I do this, I get this URL in a new tab. The tab shows a grey screen.

data:image/svg+xml,%3csvg width='458pt' height='229pt' viewBox='0.00 0.00 458.00 228.80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='graph0' class='graph' transform='scale(1 1) rotate(0) translate(4 224.8)'%3e%3ctitle%3eArgument Map%3c/title%3e%3cg id='clust1' class='cluster'%3e%3ctitle%3ecluster_1%3c/title%3e%3cpolygon fill='%23cccccc' stroke='%23cccccc' points='8%2c-8 8%2c-172.8 442%2c-172.8 442%2c-8 8%2c-8'/%3e%3ctext text-anchor='start' x='191.32' y='-158' font-family='arial' font-size='12.00' fill='black'%3eI am a group%3c/text%3e%3c/g%3e%3cg id='clust2' class='cluster'%3e%3ctitle%3ecluster_2%3c/title%3e%3cpolygon fill='%23cccccc' stroke='%23cccccc' points='16%2c-16 16%2c-94.4 228%2c-94.4 228%2c-16 16%2c-16'/%3e%3ctext text-anchor='start' x='78.65' y='-79.6' font-family='arial' font-size='12.00' fill='black'%3eI am a subgroup%3c/text%3e%3c/g%3e%3cg id='node1' class='node'%3e%3ctitle%3en1%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M422%2c-64C422%2c-64 250%2c-64 250%2c-64 244%2c-64 238%2c-58 238%2c-52 238%2c-52 238%2c-36 238%2c-36 238%2c-30 244%2c-24 250%2c-24 250%2c-24 422%2c-24 422%2c-24 428%2c-24 434%2c-30 434%2c-36 434%2c-36 434%2c-52 434%2c-52 434%2c-58 428%2c-64 422%2c-64'/%3e%3ctext text-anchor='start' x='310.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 1%3c/text%3e%3ctext text-anchor='start' x='260.14' y='-33' font-family='arial' font-size='10.00' fill='black'%3eI am an attacking argument. %23tag2%3c/text%3e%3c/g%3e%3cg id='node4' class='node'%3e%3ctitle%3en0%3c/title%3e%3cpath fill='white' stroke='%2363aef2' stroke-width='2' d='M315%2c-220.8C315%2c-220.8 143%2c-220.8 143%2c-220.8 137%2c-220.8 131%2c-214.8 131%2c-208.8 131%2c-208.8 131%2c-192.8 131%2c-192.8 131%2c-186.8 137%2c-180.8 143%2c-180.8 143%2c-180.8 315%2c-180.8 315%2c-180.8 321%2c-180.8 327%2c-186.8 327%2c-192.8 327%2c-192.8 327%2c-208.8 327%2c-208.8 327%2c-214.8 321%2c-220.8 315%2c-220.8'/%3e%3ctext text-anchor='start' x='207.05' y='-206.8' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3estatement%3c/text%3e%3ctext text-anchor='start' x='176.48' y='-189.8' font-family='arial' font-size='10.00' fill='black'%3eI am a statement. %23tag1%3c/text%3e%3c/g%3e%3cg id='edge1' class='edge'%3e%3ctitle%3en1%26%2345%3b%26gt%3bn0%3c/title%3e%3cpath fill='none' stroke='black' d='M324.17%2c-64.01C309.2%2c-87.79 282.2%2c-129.78 251.14%2c-172.29'/%3e%3cpolygon fill='black' stroke='black' points='248.2%2c-170.38 245.09%2c-180.51 253.84%2c-174.53 248.2%2c-170.38'/%3e%3c/g%3e%3cg id='node2' class='node'%3e%3ctitle%3en2%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M230%2c-142.4C230%2c-142.4 58%2c-142.4 58%2c-142.4 52%2c-142.4 46%2c-136.4 46%2c-130.4 46%2c-130.4 46%2c-114.4 46%2c-114.4 46%2c-108.4 52%2c-102.4 58%2c-102.4 58%2c-102.4 230%2c-102.4 230%2c-102.4 236%2c-102.4 242%2c-108.4 242%2c-114.4 242%2c-114.4 242%2c-130.4 242%2c-130.4 242%2c-136.4 236%2c-142.4 230%2c-142.4'/%3e%3ctext text-anchor='start' x='118.72' y='-128.4' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 2%3c/text%3e%3ctext text-anchor='start' x='67.59' y='-111.4' font-family='arial' font-size='10.00' fill='black'%3eI am a supporting argument. %23tag3%3c/text%3e%3c/g%3e%3cg id='edge3' class='edge'%3e%3ctitle%3en2%26%2345%3b%26gt%3bn0%3c/title%3e%3cpath fill='none' stroke='black' d='M165.45%2c-142.68C176%2c-152.16 188.86%2c-163.72 200.25%2c-173.96'/%3e%3cpolygon fill='black' stroke='black' points='198.08%2c-176.71 207.85%2c-180.79 202.75%2c-171.5 198.08%2c-176.71'/%3e%3c/g%3e%3cg id='node3' class='node'%3e%3ctitle%3en3%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M208%2c-64C208%2c-64 36%2c-64 36%2c-64 30%2c-64 24%2c-58 24%2c-52 24%2c-52 24%2c-36 24%2c-36 24%2c-30 30%2c-24 36%2c-24 36%2c-24 208%2c-24 208%2c-24 214%2c-24 220%2c-30 220%2c-36 220%2c-36 220%2c-52 220%2c-52 220%2c-58 214%2c-64 208%2c-64'/%3e%3ctext text-anchor='start' x='96.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 3%3c/text%3e%3ctext text-anchor='start' x='46.7' y='-33' font-family='arial' font-size='10.00' fill='black'%3eI am an undercut argument. %23tag4%3c/text%3e%3c/g%3e%3cg id='edge2' class='edge'%3e%3ctitle%3en3%26%2345%3b%26gt%3bn2%3c/title%3e%3cpath fill='none' stroke='black' d='M127.55%2c-64.28C130.02%2c-72.85 132.98%2c-83.12 135.7%2c-92.57'/%3e%3cpolygon fill='black' stroke='black' points='132.4%2c-93.75 138.53%2c-102.39 139.12%2c-91.81 132.4%2c-93.75'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e

When I click the URL and press Enter, it converts to this, and the image appears:

data:image/svg+xml,<svg width='458pt' height='229pt' viewBox='0.00 0.00 458.00 228.80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='graph0' class='graph' transform='scale(1 1) rotate(0) translate(4 224.8)'><title>Argument Map</title><g id='clust1' class='cluster'><title>cluster_1</title><polygon fill='%23cccccc' stroke='%23cccccc' points='8%2c-8 8%2c-172.8 442%2c-172.8 442%2c-8 8%2c-8'/><text text-anchor='start' x='191.32' y='-158' font-family='arial' font-size='12.00' fill='black'>I am a group</text></g><g id='clust2' class='cluster'><title>cluster_2</title><polygon fill='%23cccccc' stroke='%23cccccc' points='16%2c-16 16%2c-94.4 228%2c-94.4 228%2c-16 16%2c-16'/><text text-anchor='start' x='78.65' y='-79.6' font-family='arial' font-size='12.00' fill='black'>I am a subgroup</text></g><g id='node1' class='node'><title>n1</title><path fill='%2363aef2' stroke='black' d='M422%2c-64C422%2c-64 250%2c-64 250%2c-64 244%2c-64 238%2c-58 238%2c-52 238%2c-52 238%2c-36 238%2c-36 238%2c-30 244%2c-24 250%2c-24 250%2c-24 422%2c-24 422%2c-24 428%2c-24 434%2c-30 434%2c-36 434%2c-36 434%2c-52 434%2c-52 434%2c-58 428%2c-64 422%2c-64'/><text text-anchor='start' x='310.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 1</text><text text-anchor='start' x='260.14' y='-33' font-family='arial' font-size='10.00' fill='black'>I am an attacking argument. %23tag2</text></g><g id='node4' class='node'><title>n0</title><path fill='white' stroke='%2363aef2' stroke-width='2' d='M315%2c-220.8C315%2c-220.8 143%2c-220.8 143%2c-220.8 137%2c-220.8 131%2c-214.8 131%2c-208.8 131%2c-208.8 131%2c-192.8 131%2c-192.8 131%2c-186.8 137%2c-180.8 143%2c-180.8 143%2c-180.8 315%2c-180.8 315%2c-180.8 321%2c-180.8 327%2c-186.8 327%2c-192.8 327%2c-192.8 327%2c-208.8 327%2c-208.8 327%2c-214.8 321%2c-220.8 315%2c-220.8'/><text text-anchor='start' x='207.05' y='-206.8' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>statement</text><text text-anchor='start' x='176.48' y='-189.8' font-family='arial' font-size='10.00' fill='black'>I am a statement. %23tag1</text></g><g id='edge1' class='edge'><title>n1%26%2345%3b%26gt%3bn0</title><path fill='none' stroke='black' d='M324.17%2c-64.01C309.2%2c-87.79 282.2%2c-129.78 251.14%2c-172.29'/><polygon fill='black' stroke='black' points='248.2%2c-170.38 245.09%2c-180.51 253.84%2c-174.53 248.2%2c-170.38'/></g><g id='node2' class='node'><title>n2</title><path fill='%2363aef2' stroke='black' d='M230%2c-142.4C230%2c-142.4 58%2c-142.4 58%2c-142.4 52%2c-142.4 46%2c-136.4 46%2c-130.4 46%2c-130.4 46%2c-114.4 46%2c-114.4 46%2c-108.4 52%2c-102.4 58%2c-102.4 58%2c-102.4 230%2c-102.4 230%2c-102.4 236%2c-102.4 242%2c-108.4 242%2c-114.4 242%2c-114.4 242%2c-130.4 242%2c-130.4 242%2c-136.4 236%2c-142.4 230%2c-142.4'/><text text-anchor='start' x='118.72' y='-128.4' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 2</text><text text-anchor='start' x='67.59' y='-111.4' font-family='arial' font-size='10.00' fill='black'>I am a supporting argument. %23tag3</text></g><g id='edge3' class='edge'><title>n2%26%2345%3b%26gt%3bn0</title><path fill='none' stroke='black' d='M165.45%2c-142.68C176%2c-152.16 188.86%2c-163.72 200.25%2c-173.96'/><polygon fill='black' stroke='black' points='198.08%2c-176.71 207.85%2c-180.79 202.75%2c-171.5 198.08%2c-176.71'/></g><g id='node3' class='node'><title>n3</title><path fill='%2363aef2' stroke='black' d='M208%2c-64C208%2c-64 36%2c-64 36%2c-64 30%2c-64 24%2c-58 24%2c-52 24%2c-52 24%2c-36 24%2c-36 24%2c-30 30%2c-24 36%2c-24 36%2c-24 208%2c-24 208%2c-24 214%2c-24 220%2c-30 220%2c-36 220%2c-36 220%2c-52 220%2c-52 220%2c-58 214%2c-64 208%2c-64'/><text text-anchor='start' x='96.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 3</text><text text-anchor='start' x='46.7' y='-33' font-family='arial' font-size='10.00' fill='black'>I am an undercut argument. %23tag4</text></g><g id='edge2' class='edge'><title>n3%26%2345%3b%26gt%3bn2</title><path fill='none' stroke='black' d='M127.55%2c-64.28C130.02%2c-72.85 132.98%2c-83.12 135.7%2c-92.57'/><polygon fill='black' stroke='black' points='132.4%2c-93.75 138.53%2c-102.39 139.12%2c-91.81 132.4%2c-93.75'/></g></g></svg>

Any idea what's going on? Can you suggest a way I can make this work without having to press Enter in the URL bar?

tigt commented 3 years ago

Hm, this might be something the browser is doing to prevent self-inflicted XSS. I know my Firefox recently started refusing to navigate to data: URIs — what browser are you using?

DawnPaladin commented 3 years ago

I'm using Firefox. In Chrome and Safari, it's worse, taking tens of seconds to open, if it opens at all.

tigt commented 3 years ago

Gotcha. Firefox did officially announce something that seems like it’s probably the culprit: Blocking Top-Level Navigations to data URLs for Firefox 59

As for Chrome and Safari, I can’t reproduce your behavior, but that doesn’t mean it’s not happening. Does the lag still happen with incredibly small, simple SVGs?

DawnPaladin commented 3 years ago

You're right - according to that blog post, Firefox is explicitly blocking the behavior I'm trying for.

I will approach my problem from a different direction. Thank you for your guidance, @tigt!