Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restrictions about svg #9243

Closed
eduardcotmrf opened this issue May 10, 2017 · 13 comments
Closed

Restrictions about svg #9243

eduardcotmrf opened this issue May 10, 2017 · 13 comments

Comments

@eduardcotmrf
Copy link

In the documentation (https://www.ampproject.org/docs/reference/spec#svg) it says that you cannot reference any svg with the "xlink:href" attribute not starting wtih '#'. Why is that?

In our amp page we have to load icons that are used below the fold but because of this restriction we are having them inline in the html above the fold and then used with '#' references. That makes no sense as this icons are not used and they represent a huge amount of data to be downloaded with the html.

Is there any special reason for this restriction? Aren't icons like images that can be downloaded later?

Thanks!

@eduardcotmrf
Copy link
Author

Hi,

any update in this question?

Thanks

@Gregable
Copy link
Member

@dvoytenko

@dvoytenko
Copy link
Contributor

@eduardcotmrf Do you have an example SVG? Basically, we restricted xlinks to defs to only use local resources. If we were to extend it to non-local resources, they'd have to be rewritten by caches and verified to be HTTPS, etc. We did an initial research and found that this is not common. So, please share your samples with us and we'll discuss.

@eduardcotmrf
Copy link
Author

What we want to achieve is something like this:

HTML example:

    <svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink">
        <use xlink:href="https://localhost.test/icons/below.svg#icon-telegram"></use>
    </svg>

    <svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink">
        <use xlink:href="https://localhost.test/icons/below.svg#icon-whatsapp"></use>
    </svg>

SVG EXAMPLE:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

	<svg id="icon-telegram" viewBox="0 0 24 24">
		<path d="M21.05 4c-.4 0-.82.16-.93.2L2.98 10.9c-.1.04-1.07.4-.97 1.16.1.7.87 1 .96 1.03l4.15 1.38 1.52 4.9c.2.64.43.98.7 1.05.08.04.17.05.25.05.28 0 .48-.15.53-.18l2.57-2.34 4.12 3.14c0 .02.04.03.06.05.26.1.5.16.74.16.94 0 1.3-.86 1.34-.96L22 4.94c0-.58-.36-.94-.95-.94zM9.85 15.02l-1.76-.85 9-5.7-7.25 6.55zm-.65 3.9l-1.25-4.06 1.62.78-.37 3.28zm.6.7l.4-3.54 1.92 1.45-2.3 2.1zm8.48.53s-.2.48-.68.48c-.13 0-.27-.04-.43-.1l-6.7-5.13c1.4-1.27 7.6-6.86 7.87-7.13.18-.16.37-.38.34-.62v-.07c-.04-.22-.17-.32-.23-.36-.27-.16-.63 0-.9.15l-10.2 6.46-4.16-1.4c-.13-.03-.48-.2-.5-.45-.03-.16.3-.35.52-.43l17.15-6.7c.2-.08.46-.16.68-.16.22 0 .26.05.27.17l-3.04 15.28z"/>
	</svg>

	<svg id="icon-whatsapp" viewBox="0 0 24 24">
		<path d="M12.2 2.84c.6 0 1.2.06 1.77.18.6.12 1.16.3 1.72.5.52.23 1.02.5 1.5.82.48.33.93.7 1.37 1.1.4.43.76.88 1.1 1.34.3.46.58.96.8 1.5.25.54.43 1.1.53 1.7.1.6.17 1.18.17 1.77 0 .6-.06 1.2-.17 1.78-.1.57-.28 1.14-.53 1.7-.22.52-.5 1.02-.8 1.5-.34.48-.7.92-1.1 1.33-.44.4-.9.76-1.37 1.1-.48.3-.98.58-1.5.8-.57.25-1.14.42-1.73.53-.6.1-1.17.15-1.76.15-.4 0-.8-.02-1.17-.07-.4-.04-.77-.1-1.14-.2-.35-.1-.7-.2-1.03-.35-.34-.14-.68-.3-1.02-.5l-.33-.13-4.22 1.35 1.4-4.1-.2-.3c-.43-.7-.75-1.43-.97-2.22-.22-.78-.32-1.58-.32-2.4 0-.57.07-1.16.2-1.75.12-.6.3-1.16.5-1.72.22-.52.5-1.02.8-1.48.34-.46.72-.9 1.15-1.35.4-.4.84-.76 1.32-1.1.48-.3 1-.58 1.5-.8.57-.22 1.14-.4 1.73-.5.6-.13 1.2-.2 1.8-.2zm0-.84c-1.35 0-2.63.26-3.82.77-1.2.5-2.23 1.2-3.1 2.08-.9.9-1.6 1.92-2.12 3.1-.53 1.2-.8 2.46-.8 3.8 0 .92.13 1.8.38 2.66.25.86.6 1.65 1.07 2.36L2 22l5.48-1.72c.68.37 1.42.67 2.22.88.8.22 1.64.33 2.5.33 1.34 0 2.6-.27 3.8-.78 1.22-.5 2.26-1.2 3.15-2.08.88-.9 1.57-1.9 2.08-3.1.5-1.16.77-2.43.77-3.8 0-1.32-.26-2.6-.77-3.78-.5-1.2-1.2-2.22-2.08-3.1-.9-.9-1.93-1.58-3.14-2.1-1.2-.5-2.46-.76-3.8-.76zm4.6 11.97c-.12-.1-.4-.25-.85-.5-.45-.22-.74-.35-.86-.38-.1-.07-.2-.1-.3-.1-.08 0-.18.06-.27.18-.1.13-.23.3-.42.5-.17.23-.3.37-.4.43-.07.1-.15.15-.24.15-.1 0-.18-.03-.28-.1l-.74-.36-1.25-.94c-.35-.34-.64-.7-.87-1.04-.23-.36-.38-.6-.44-.72-.1-.13-.13-.23-.08-.3.05-.08.1-.15.16-.2l.42-.43.14-.2c.1-.1.12-.2.1-.22.05-.06.08-.13.06-.2 0-.1-.04-.16-.07-.22l-.3-.8-.4-1.1c-.1-.22-.18-.34-.27-.37l-.28-.1h-.46l-.33.08c-.23.04-.35.1-.38.2l-.5.68c-.26.32-.4.78-.43 1.37-.04.6.1 1.18.38 1.7l.54.93c.06.06.45.6 1.16 1.58.7 1 1.7 1.77 2.97 2.33 1.27.53 2.02.78 2.27.76l.7-.03c.25-.03.57-.15.97-.37s.66-.46.78-.74c.1-.3.16-.57.2-.8.02-.2.02-.35 0-.4l-.17-.13-.3-.16z"/>
	</svg>

</svg>

So the browser will cache the below.svg file and the icons data won't be contained in the HTML.

@dvoytenko
Copy link
Contributor

@eduardcotmrf Thanks for the examples. I don't see any major problem opening this up as long as the Caches can correctly proxy these links. So, let's start with caches and we'll enable in validator.

/cc @vitaliybl @codewiz @dknecht

@eduardcotmrf
Copy link
Author

What can we do to help?

/cc @alexmrf

@honeybadgerdontcare
Copy link
Contributor

@eduardcotmrf At this point we need to wait for the caches (Google, Cloudflare, etc) to implement the proxy for these links and update the modifications best practices. For Google AMP Cache it's tracked internally at b/62073090.

Once those are done then it can be enabled in the validator.

@eduardcotmrf
Copy link
Author

Do we have any update on this?

Thanks!

@honeybadgerdontcare
Copy link
Contributor

Unfortunately not right now.

honeybadgerdontcare added a commit that referenced this issue Jun 20, 2017
Add svg image url example in preparation of #9243.
<svg class="icon" xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="https://example.com/test.svg#icon"></use></svg>
@honeybadgerdontcare
Copy link
Contributor

@eduardcotmrf cache changes are proceeding. Once they're in, we'll update the validator to allow it.

@eduardcotmrf
Copy link
Author

Thank you!

@honeybadgerdontcare
Copy link
Contributor

This is now live in prod.

@Aliaksandr-Padabed
Copy link

Does AMP provide polyfill for external svg use?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants