html - img - Intento inseguro de cargar la URL svg

svg web

Question

Recibo un error en Chrome al intentar cargar un SVG en mi sistema de archivos local:

Intento no seguro de cargar el archivo URL: /// C: /Users/Me/Documents/HTML/icons.svg#menu desde el marco con el archivo URL: /// C: /Users/Me/Documents/HTML/master.html. Deben coincidir los dominios, protocolos y puertos.

Aquí está mi HTML:

<svg id="icon-menu" viewBox="0 0 70 60">
<use xlink:href="icons.svg#menu"></use>
</svg>

y el SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 70 70">
<g
id="menu">
<path
d="m 10,15 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
<path
d="m 10,30 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
<path
d="m 10,45 50,0"
style="fill:none;stroke:#ffffff;stroke-width:4;stroke-linecap:round;" />
</g>
</svg>

He buscado en Internet, pero las únicas soluciones que puedo encontrar son para código ya escrito en JavaScript, pero no lo es. El HTML anterior no funciona en IE, no da ningún error, pero funciona sin problemas en Firefox.

Answer 1

Como escribí en davidwells.io (en esta página también está su solución de Javascript del problema):

Tuve el mismo problema cuando usé un archivo SVG externo. Tuve que cambiar la configuración del servidor virtual y detener la redirección automática de solicitudes SVG de HTTP a HTTPS. Otras palabras: el archivo SVG debe estar disponible en ambos protocolos. Ahora está funcionando.

Answer 2

Esta página tiene todas las respuestas, creo:

https://css-tricks.com/svg-use-external-source/

• Simplemente no funciona en IE a menos que use un polyfill.
• Los comentarios en la página describen el problema en Chrome cuando se ejecutan localmente:

puede desarrollar algunos problemas de dominio cruzado con esta técnica al desarrollar localmente, si no está desarrollando con un servidor.