557622040.

docx 1 de 2

https://jorgeatgu.com/scalable/chapter2.html#a%C3%B1adir-svg-al-html
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol
https://css-tricks.com/svg-symbol-good-choice-icons/ - https://svg-to-symbol.herokuapp.com/
https://www.javatpoint.com/svg-symbol-element
http://tutorials.jenkov.com/svg/symbol-element.html

Añadir SVG al HTML

Vamos a ver las diferentes opciones que tenemos para añadir nuestros archivos SVG en el HTML.

Con la etiqueta img
<img src="smilipostbox.svg">

Con la etiqueta object
<object type="image/svg+xml" data="smilipostbox.svg"></object>

Con la propiedad background-image de CSS
<div class="background"></div>

{lang="css", linenos="off"}
.background {
width: 100%;
height: 310px;
background: url(smilipostbox.svg) no-repeat;
}

Con HTML5 podemos incluir directamente el código entre las etiquetas body del HTML.

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="300" viewBox="0 0 200 300">

<rect width="40" height="40" fill="navajowhite" stroke="crimson" stroke-

width="20"/>
</svg>

Sistema de coordenadas y unidades de medida

El sistema de coordenadas que utiliza SVG está compuesto por el valor horizontal que está representado por x=”0” y
el vertical que está representado por y=”0”, el sistema de coordenadas por defecto sera con los dos valores a cero,
así que comenzará en la esquina superior izquierda.
La unidad de medida por defecto es el pixel, así que si no especificamos valor alguno la unidad de medida utilizada
será el pixel.

SVG también acepta las siguientes unidades de medida:

 CM > centímetros, equivale a 35.43px
 EM > es relativa al tipo de letra que se esté usando, suele equivaler a 16px
 EX > es relativa a la altura de la letra x minúscula de la fuente que se esté usando
 IN > pulgadas, equivale a 90px
 MM > milímetros, equivale a 3.54px
 PC > picas, equivale a 15px
 PT > puntos, equivale a 1.25px
 PX -> pixels

viewBox
Con el atributo viewBox definimos el área que queremos que sea visible dentro de un SVG. El atributo se define con
cuatro valores, los dos primeros corresponden a las coordenadas min-x y min-y, los dos siguientes a la anchura y
 557622040.docx 2 de 2

altura con width y height. Los valores estarán separados por espacios en blanco o comas. Ni width ni height admiten
valores negativos.