tag manipulation insertar img code xml svg tags

xml - manipulation - svg on img tag



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

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

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 simples svg? He intentado jugar con los complicados, y todo funciona bien al final si no los incluyo.

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

  • Necesario para archivos image / svg + xml . 1
  • Opcional para <svg> . 2

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

  • Necesario para archivos image / svg + xml con xlink: atributos. 1
  • Opcional para <svg> con xlink: atributos. 2

El atributo version="1.1" es:

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

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.

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)), he encontrado que:

  1. Para el 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:
    • Use xhr.responseText y elm.innerHTML . Esto no requiere los xmlns.
    • Utilice xhr.responseXML.documentElement y elm.appendChild() o elm.insertBefore() . Este método de crear el SVG en línea produce resultados a medio cocer 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 del documento, como getElementById() no se reconocen en el elemento <svg>. Supongo que esto se debe a que usa el analizador XML XMLHttpRequest fuera del HTML.

Todos los UA ignoran el atributo de versión, por lo que siempre puede soltar eso.

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

Sin embargo, si publicas tu página como image / svg + xml o application / xhtml + xml o cualquier otro tipo MIME que haga 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, así que hay mucho contenido que se sirve así.