¿Se necesitan parámetros SVG como 'xmlns' y 'versión'?

204

En aproximadamente la mitad de los ejemplos de svg que veo en Internet, el código está envuelto en <svg></svg>etiquetas simples y simples .

En la otra mitad, las etiquetas svg tienen muchos atributos complicados como este: 

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

Mi pregunta es: ¿está bien usar las etiquetas svg simples? He intentado jugar con los complicados, y todo funciona bien si no los incluyo.

xml svg tags Lars
fuente

Respuestas:

207

Todos los agentes de usuario (navegadores) ignoran el atributo de versión, por lo que siempre puede descartarlo.

Si incrusta su SVG en línea en una página HTML y sirve esa página, text/htmlentonces no se requieren atributos xmlns . Incrustar SVG en línea en documentos HTML es una innovación bastante reciente que surgió como parte de HTML5.

Sin embargo, si sirve su página como image / svg + xml o application / xhtml + xml o cualquier otro tipo MIME que hace que el agente de usuario use un analizador XML, entonces se requieren los atributos xmlns . Esta era la única forma de hacer las cosas hasta hace poco, por lo que hay una gran cantidad de contenido publicado de esta manera.

Robert Longson
fuente
55
"Todos los UA ignoran el atributo de versión, por lo que siempre puedes descartarlo". ¿Pero qué tiene que decir la especificación sobre el asunto? "Los navegadores le permitirán salirse con la suya" es (o ha sido en algún momento cierto) de muchas prácticas que son (o fueron) inequívocamente incorrectas.
Mark Amery
En IE11, si lo pongo <!DOCTYPE svg xmlns="www.w3.org/2000/svg">funciona, pero si quito los xmlns o lo cambio, <!DOCTYPE svg xmlns="www.example.com">no funciona. ¿Porqué es eso?
Donald Duck
8
¿Podría citarse una fuente para esta respuesta, por favor?
2540625
69
Escribí una fracción significativa del código SVG en Firefox y lo digo. ¿No es eso lo suficientemente bueno? Si no, he agregado algunos enlaces de todos modos.
Robert Longson
1
@Marcel no si esos datos-uris son image / svg + xml, que suele ser el caso, entonces la parte final de la respuesta es válida.
Robert Longson el
228

El xmlns="http://www.w3.org/2000/svg"atributo es:

  • Necesario para archivos de imagen / svg + xml . 1
  • Opcional para en línea <svg> . 2

El xmlns:xlink="http://www.w3.org/1999/xlink"atributo es:

  • Necesario para archivos de imagen / svg + xml con xlink: atributos. 1
  • Opcional para en línea <svg> con xlink: atributos. 2

El version="1.1"atributo es:

  • Recomendado para cumplir con los estándares de archivos image / svg + xml . 3
  • Aparentemente ignorado por cada agente de usuario. 4 4
  • Eliminado en SVG 2. 5

1 Identificadores de recursos internacionalizados (RFC3987)
2 Desde HTML5
3 Lenguaje de marcado extensible (XML) 1.0
4 Probablemente hasta el lanzamiento de otras versiones principales.
5 SVG 2, Recomendación del candidato del W3C, 07 de agosto de 2018

ncomputadoras
fuente
2
¿Tiene que ser http o también https?
JohannesB
2
@JohannesB ambos protocolos son compatibles: D
ncomputers
1
@JohannesB sí aquí se tiene una inline ejemplo HTTP HTTPS y la imagen / svg + xml archivo con inline SVG con XLink atribuye ejemplo HTTP HTTPS
ncomputers
1
Gracias, supongo que Nick Craver también comete errores;)
JohannesB
2
No confunda el versionatributo de la declaración xml ( <?xml version...) con el versionatributo del <svg>elemento. El primero trata sobre la versión del lenguaje de marcado XML, mientras que el último especifica la versión de SVG. El autor de esta respuesta cometió ese error al referirse al XML, no a la especificación SVG en ³. Traté de corregirlo, pero algunos idiotas rechazaron la edición.
Bachsau
7

Me gustaría agregar a ambas respuestas, pero no tengo puntos, estoy agregando una nueva respuesta. En pruebas recientes en Chrome (versión 63.0.3239.132 (compilación oficial) (Windows de 64 bits)), descubrí que:

  1. Para SVG en línea que se ingresa directamente en el archivo HTML, a través del editor de texto o javascript y elm.innerHTML, los atributos xmlns no son necesarios, como se indica en las otras dos respuestas.
  2. Pero para SVG en línea que se carga a través de JavaScript y AJAX, hay dos opciones:
    • Uso xhr.responseTexty elm.innerHTML. Esto no requiere los xmlns.
    • Uso xhr.responseXML.documentElementy elm.appendChild()o elm.insertBefore(). Este método de crear el SVG en línea produce resultados a medias sin que se declare el espacio de nombres SVG básico, como en xmlns="http://www.w3.org/2000/svg". El <svg> se carga en el HTML, pero las funciones a nivel de documento, como las que getElementById()no se reconocen en el elemento <svg>. Supongo que esto se debe a que usa el analizador XML XMLHttpRequest fuera del HTML.
jamess
fuente
0

Acerca del atributo de versión SVG que dice el MDN WebDoc

En desuso desde SVG 2
Esta función ya no se recomienda. Aunque algunos navegadores aún pueden admitirlo, es posible que ya se haya eliminado de los estándares web relevantes, que se esté descartando o que solo se haya mantenido con fines de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad al final de esta página para guiar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

El atributo de versión se utiliza para indicar a qué especificación se ajusta un documento SVG. Solo está permitido en el elemento raíz. Es puramente consultivo y no tiene influencia en el procesamiento o procesamiento.

PD: El SVG 2 está lejos de convertirse en un estándar todavía.

Velusamy Velu
fuente