Cómo Codificar a Mano SVG

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Final product image — What You'll Be Creating

Una de las grandes cosas sobre gráficos vectoriales escalables (aparte de ser infinitamente escalables sin pérdida de calidad) es que una vez que sabes los fundamentos se pueden formas simples de mano-código fácilmente, sin necesidad de abrir una aplicación de gráficos.

Con unas pocas líneas de código puede tener sus propios iconos personalizados, y usted sabrá exactamente cómo cada uno se coloca juntos. Cuando usted crea sus propio SVGs Asegúrese de se escriben de la manera más eficiente posible, y tiene el máximo nivel de control al usar en sus sitios.

En este tutorial vamos a cubrir todos los fundamentos de la codificación SVGs a mano, pero no voy a aburrir con una conferencia seco que sólo trota hacia fuera las formas relevantes y los atributos. En cambio usted aprenderá a mano código SVG a través de la práctica, creando los seis iconos que ves al inicio de este tutorial (Mira la demo en línea). En el proceso, deberá usar todos los elementos básicos necesarios para la codificación de la mano de la SVG.

Hablando de los elementos básicos, vamos a tener un rápido resumen introductorio sobre lo que cada uno de ellos son.

Elementos SVG Básicos

Usted puede conseguir en una gran cantidad de complejidad con SVG, pero que no es necesario para los iconos que vamos a hacer. La siguiente lista cubre los bloques que necesitamos.

<svg> Envuelve y define todo el gráfico. <svg> es un gráfico vectorial escalable lo que la <html> elemento es una página web.
<line> Hace solo líneas rectas.
<polyline> Hace líneas de segmentos múltiples.
<rect> ace rectángulos y cuadrados.
<ellipse> Hace círculos y óvalos.
<polygon> Hace formas de caras rectas, con tres lados o más.
<path> Hace de cualquier forma que te gusta definiendo puntos y las líneas entre ellos.
<defs> Define activos reutilizables. Nada dentro de esta sección de <defs> es visible inicialmente. <defs> es un gráfico vectorial escalable lo que la <head> elemento es una página web.
<g> Envuelve varias formas en un grupo. Colocar los grupos en la <defs> sección para que puedan reutilizarse.
<symbol> Como un grupo, pero con algunos extra presenta. Normalmente se ubican en la <defs> sección.
<use> Toma activos definidos en el <defs> la sección y los hace visibles en el SVG.

Como ir a través y crear nuestros iconos, que va trabajando a través de esta lista de elementos en el orden arriba.

Archivos de Arranque

Antes de empezar, tome usted una copia de los archivos de arranque desde el repositorio de GitHub. Puede descargar un archivo .zip o clonar el repositorio a su propio sistema.

Vamos a comenzar con un documento que tiene algunos basic HTML y CSS ya en lugar. Esto le dará un estilo a SVGs que estará haciendo y también os hará con una pequeña rejilla en la página. A crear nuestros iconos por encima de esta red, y que le ayudará a visualizar las coordenadas que se trabaja con colocación por sus SVGs.

Cuando abren "handcodedsvg.html" de la carpeta de "Archivos de arranque" de origen debería ver lo siguiente:

Primer rápido en `x` y `y` valores

Cuando trabajo en espacio 2D en un sitio web, el eje horizontal está representado por x y el eje vertical está representado por y. posiciones a lo largo de cada uno de estos ejes están representados por números. Si queremos mover algo hacia la derecha, necesitaremos utilizar x mayor los valores, y mover a la izquierda usaremos x decreciente los valores. Asimismo, para mover que algo abajo vamos a usar aumentando y valores y para mover algo hasta vamos a usar decreciente y valores.

Una abreviatura común para expresar x e y valores de un solo punto es (x, y). Por ejemplo, un punto en 10 en el eje x y 50 en el eje y puede ser escrito como (10, 50). Usaré esta taquigrafía de vez en cuando, en este tutorial.

¿Observe las dos líneas más oscuras de nuestra red? Vamos a colocar nuestro SVG por lo que su esquina superior izquierda se alinea con el lugar que se cruzan. Como tal, ese punto de intersección representa la posición x=0 e y=0, o (0,0), de los SVG.

La Cuadrícula de Fondo

Cada una de las líneas de cuadrícula más ligeras representa 10px, y las líneas de espesor mediano representan 100px. Así que si queremos mover un objeto hacia abajo de una línea de espesor mediano a la siguiente, aumentarían su ubicación en el eje y un 100px.

Si aún suena un poco confuso, no te preocupes esta todo sentido ya que conseguimos en la práctica de crear nuestros iconos SVG.

Estilo SVG por Defecto

Tenga en cuenta que en el archivo HTML de arranque allí es algunos había incluido CSS con el estilo por defecto para nuestros iconos SVG pronto crear:

svg {
  stroke: #000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

Esto configurará nuestros iconos que no rellenos y trazos amplia 5px negro con tapas redondeadas y se une.

1. Instalación del SVG

El primer paso en la creación de cualquier SVG es establecer una <svg></svg> elemento. Todo lo que quieras tu SVG para mostrar debe ser entre estas etiquetas. Hay algunos atributos que se pueden utilizar en este elemento, pero nosotros mantener las cosas simples usar width y height.

Agregue el código siguiente en el <body> sección de su documento HTML:

1	<svg width="750" height="500">
2
3	</svg>

Nota: el CSS en nuestro archivo de arranque va a compensar este SVG hacia abajo y hacia la derecha por 100px para que su esquina superior izquierda se colocará en el punto de intersección de las dos líneas más oscuras de nuestra rejilla de fondo. Y los valores en las CodePen demos a lo largo de este tutorial pueden diferir un poco demasiado, pero no dude en jugar con ellos.

2. Crear el Icono "Alinear a Izquierda "

Vamos a empezar utilizando el <line> elemento para crear esta izquierda alinear icono:

El elemento de línea tiene cuatro atributos que necesita utilizar:

x1 punto de partida de la línea horizontal
y1 punto de partida de la línea vertical
x2 final de la línea horizontal
y2 final de la línea vertical

Para resumir lo anterior, utiliza la x1 y atributos y1 para establecer donde comienza la línea y la x2 y y2 atributos para establecer donde termina la línea.

Vamos a crear la primera línea de nuestro icono, el uno en la parte superior. Vamos a hacer el 45px de línea larga, sin embargo la carrera de 5px estamos utilizando va a añadir algunos píxeles adicionales alrededor del exterior de nuestra línea. Así tendremos que compensar nuestra línea hacia abajo y a la derecha por 3px para ninguno de los píxeles extras creados por los tiempos recortado apagado.

Por ello, vamos a empezar nuestra línea en una posición de 3 en el eje x y 3 en el eje y. Podemos fijar esta línea de punto de partida de (3,3) usando los atributos x1="3" y1="3".

Queremos que la línea que 45px largo, así que vamos a añadir 45 a nuestra a partir de x posición de 3, que nos da 48 como el valor que queremos establecer para x2. Queremos que la línea de final en la misma posición en el eje horizontal, por lo que instalaremos y2 a igual a 3, es decir, el mismo valor que le dimos a y1. Le agregamos esta línea (48,3) final a través de los atributos x2="48" y2="3".

El código completo de la primera línea debería parecerse a esto:

1	<line x1="3" y1="3" x2="48" y2="3"></line>

Compruebe vista previa de su navegador y usted debería ver una línea de 45px negro largo con tapas redondeadas agradables.

Ahora podemos seguir adelante y añadir las siguientes tres líneas a nuestro icono. Queremos terminar con cuatro líneas en total. La primera y la tercera deben ser 45px largo, y la segunda y la cuarta deben ser 62px largo. También queremos un espacio vertical entre cada uno de 16px.

Podemos lograr esto con el siguiente código:

1	<line x1="3" y1="3" x2="48" y2="3"></line>
2	<line x1="3" y1="19" x2="65" y2="19"></line>
3	<line x1="3" y1="35" x2="48" y2="35"></line>
4	<line x1="3" y1="51" x2="65" y2="51"></line>

Nota: los valores y de cada línea incrementalmente aumentan 16px para crear la distancia vertical requerida.

Tomar otra mirada en vista previa de su navegador y usted debería ver las cuatro líneas. También puede editar SVG directamente en esta pluma:

Please accept marketing cookies to load this content.

Comente Sus Iconos Como Vamos

Con ese código en su lugar, su primer icono ya está hecho. Estamos listos para pasar a crear el icono de siguiente y vamos a querer hacer en la misma posición en la parrilla, pero ahora la izquierda alinea el icono está en el camino. Como tal, por ahora solo comente su código para borrar el espacio. Vamos a volver y descomentar más adelante cuando convertimos nuestros iconos en activos reutilizables.

Usted tendrá que hacer lo mismo para cada icono que nos vamos, al comentar que después de terminar de crearlo. Por eso probablemente también es una buena idea añadir una pequeña nota sobre el código de cada icono para saber que es que cuando vuelves a ellos más tarde.

3. Crear un Icono de "Cursor a la Derecha"

Este icono, vamos a usar la próxima evolución del elemento <line>: El <polyline>. Lo usaremos para crear un cursor apuntando derecho.

El <polyline> sólo tiene un atributo: points. Aquí utiliza pares de números para establecer una serie de puntos. Las líneas se trazarán automáticamente entre ellos. Los pares de números se escriben simplemente un número tras otro dentro de atributo points. Separación por comas no es necesaria, aunque opcionalmente puede ser incluido. Para facilitar la lectura que te gustaría poner cada par de valores en su propia línea en el código.

Vamos a empezar a polilínea de nuestro cursor derecha en el mismo lugar que empezamos nuestro último icono, que siendo (3,3) para nuestro movimiento y las tapas no conseguir acortar. Queremos nuestro segundo punto para pasar a la derecha y hacia abajo por 25px, así que instalaremos lo a (30,28). Nuestro tercer punto debe estar alineada verticalmente con el primer punto y bajar por otro 25px, por lo que se establecerá (3,53).

Podemos agregar estos puntos en el atributo de puntos de la polilínea como tal:

<polyline points="
  3 3
  30 28
  3 53
"></polyline>

Si quieres código más conciso, también puede escribir lo anterior como:

1	<polyline points="3 3, 30 28, 3 53"></polyline>

1	<polyline points="3 3 30 28 3 53"></polyline>

Echa un vistazo a la preview de su navegador y usted debería ver su demostración de icono cursor derecha: otro icono de hecho, apenas como eso!

Please accept marketing cookies to load this content.

Una vez más, comentar este icono y darle una pequeña nota para que sepa que uno es antes de pasar al siguiente icono.

4. Crear un Icono de "Buscar"

Ahora tenemos líneas abajo pat, vamos a crear algunas formas, a partir de un rectángulo (<rect>). Vamos a utilizar en conjunto con un par de <line> s para crear un icono de browser.

Rectángulos y cuadrados pueden crearse con el <rect> elemento, que tiene cuatro atributos necesita proporcionar:

x la parte superior izquierda posición de esquina en el eje x
y la posición de la esquina superior izquierda en el eje y
width ancho de la forma
height altura de la forma

Nota: también puede utilizar los atributos rx y ry para crear esquinas redondeadas si desea.

Vamos a crear un rectángulo con la esquina superior izquierda por 3px en ambas direcciones, para evitar el recorte de los tiempos, así que vamos a utilizar los atributos x="3" y="3". Queremos que ser 80px ancho y 60px alta, así que vamos a utilizar también el de atributos width="80" height="60".

Como tal debe ser nuestro código completo rectángulo:

1	<rect x="3" y="3" width="80" height="60"></rect>

Guarde el código y echa un vistazo a la preview de su navegador. Verá un rectángulo poco aseado sentado allí.

Ahora lo único que debemos hacer es añadir una línea horizontal en la parte superior, y una línea vertical en la parte superior izquierda, como ver representado en la imagen al comienzo de esta sección. Utilizaremos el mismo proceso de creación de línea como hicimos antes, y nuestro código del icono de navegador completa debe verse así:

1	<rect x="3" y="3" width="80" height="60"></rect>
2	<line x1="3" y1="19" x2="83" y2="19"></line>
3	<line x1="20" y1="3" x2="20" y2="17"></line>

Tome un momento para mirar las coordenadas en los atributos de dos línea y tal vez cambiar sus valores alrededor de un poco más para que pueda ver cómo están trabajando en este icono.

Please accept marketing cookies to load this content.

5. Crear un Icono de "Alerta"

Ahora que ya tenemos creación de rectángulos bajo control, vamos a probar con <ellipse> de s. Vamos a usar dos de ellos, junto con un <line>, para crear este icono Alerta:

Como rectángulos, el <ellipse> elemento también requiere cuatro atributos, sin embargo son un poco diferentes a los de rectángulos. En lugar de usar width y height ponemos un radio horizontal y vertical. Y en vez de colocar la esquina superior izquierda de la forma, posición de su centro:

cx la posición central en el eje x. Creo que "cx centro de x".
cy la posición central en el eje y. Creo que "cy centro de y".
rx el tamaño del radio en el eje x, es decir, altura de la forma dividido por la mitad. Creo que "rx radio de x".
ry el tamaño del radio en el eje y, es decir, el ancho de la forma dividida por la mitad. Creo que "ry radio de y".

Queremos un círculo perfectamente redondo que es 80px amplia por 80px de alto, que significa que necesitaras su radio a 40px en ambos ejes. Lo fijamos con los atributos rx="40" ry="40".

También queremos que el círculo para sentarse a ras con las líneas más oscuras en nuestro gráfico. Dado que nuestro círculo será 80px ancho y alto, pondría su punto central en 40px. También necesitamos para nuestro 3px offset para evitar recorte sin embargo, lo que significa punto de centro de nuestro círculo debe 43px en ambos ejes. Lo fijamos con el atributos = cx"43" cy="43".

Poner todo eso junto, tenemos este código:

1	<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

Compruebe su vista previa del explorador y ahora debería ver un círculo en tu página de.

Vamos a añadir ahora un segundo círculo, para crear el punto en la parte inferior de la marca del exclamation. Vamos a crear esto en apenas la misma manera, la única diferencia que vamos a utilizar un estilo en línea para establecer el relleno en negro:

1	<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>

Finalmente, sólo necesitamos añadir una línea para crear la otra parte de la marca del exclamation. Una vez más estamos usando las mismas técnicas como con las otras líneas que hemos utilizado hasta ahora, con la única diferencia que vamos a utilizar un estilo para ligar esta anchura del movimiento hacia arriba de 5px de 8px.

El código completo de nuestro icono de alerta es el siguiente:

Please accept marketing cookies to load this content.

6. Crear un Icono de "Play"

Ahora tenemos la caída de las formas relativamente fijas de rectángulos y elipses, estamos listos para rodar nuestros propios formas utilizando el <polygon> elemento. Podemos crear cualquier forma varias cara que queremos con esto, de octágonos a estrellas. Sin embargo mantendremos cosas rectas hacia adelante por el momento y crean un triángulo. Combinaremos con un <ellipse> para crear un icono de play:

El elemento <polygon> es casi idéntico al elemento <polyline>. También tiene un atributo, points, en la que utiliza pares de valores para establecer cada punto que compone la forma. La diferencia es que mientras que una polilínea seguirá siendo abierta, un polígono se cerrará automáticamente sí mismo.

Vamos a empezar por conseguir el círculo que nuestro polígono se sentará dentro de. Vamos a utilizar la elipse misma exacta que hicimos en nuestro icono de alerta:

1	<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

Ahora vamos a crear nuestro polígono. Vamos a colocar tres puntos, y se generará automáticamente las líneas entre estos puntos para crear un triángulo. Los puntos serán (35,23), (60,43) y (35,63). Como tal código de nuestro polígono será:

1	<polygon points="35 23, 60 43, 35 63" />

Y código del nuestro icono juego completo es:

Please accept marketing cookies to load this content.

7. Crear un Icono de "Descargar"

Ahora nos moveremos en el medio de producir formas SVG más potencialmente complejo, pero al mismo tiempo más flexible, y es el elemento <path>. Crear una ruta de acceso es un poco como crear un polígono, donde usted pone su forma una pieza en un momento. Sin embargo con una trayectoria directamente crea cada punto y línea a ti mismo sin automatización, y también tienes la opción de crear curvas entre puntos en lugar de líneas rectas.

Una ruta de acceso puede utilizarse para crear cualquier cosa, pero más allá de un cierto nivel de complejidad está aún mejor usando una aplicación de diseño vectorial en lugar de codificación de la mano. Por esa razón, va a centrarse en un pequeño subconjunto de la funcionalidad de la ruta de acceso y utilizarlo para crear este icono de la descarga:

Técnicamente, se podría crear la forma anterior con un polígono, pero esta flecha nos dará una buena manera de conseguir a través de cómo funciona el elemento de ruta de acceso.

Va a utilizar sólo uno de los atributos de <path>, y es d. La d significa "datos", y es aquí a definir todos los puntos y las líneas de su reinado. Dentro de este atributo, se proporcionan comandos para establecer los puntos de una ruta y crear líneas entre ellos vía solas letras como M o L, seguido de un conjunto de x o y coordenadas.

Hay varios de estos comandos, pero para darle una introducción al trabajo con <path> lo adhieren a algunos que puede ser realista usado cuando de la mano de codificación. Son los siguientes:

M representa moveto. Comienza un nuevo camino en una determinada posición, definida con x y y valores. Imaginar es como al pasar el ratón sobre un punto en tu lienzo, listo para dibujar. La capital M indica hacia un sistema absoluto de coordenadas. (La m minúscula indicaría coordenadas relativas).
L representa lineto. Trazar una línea desde la posición actual a una nueva posición. La capital L indica hacia un sistema absoluto de coordenadas. (L minúscula indicaría coordenadas relativas).
Z representa closepath. Convierte el camino en una forma cerrada dibujando una línea recta entre el punto actual hasta el primer punto en el camino.

Definitivamente debe ver estos tres comandos (y el icono que vamos a crear con ellos), como un manual introductorio al elemento <path>. Para realmente sacar el máximo partido usted querrá familiarizarse con todos los comandos a tu disposición.

Codifica Su Icono de Descarga

Para la ruta de icono de descarga de código te recomiendo agregar primero en el elemento de trayectoria vacía:

1	<path d="
2
3	"></path>

Desde aquí, añadir en cada comando uno a la vez, ahorrar y ver el progreso de la forma para ver cómo se crea. También recomiendo poner cada comando en su propia línea para facilitar la lectura.

En primer lugar, queremos pasar a (18,3), el punto en que queremos que nuestra flecha para empezar. Para ello vamos a añadir el comando M 18 3 al atributo d de nuestro camino.
A continuación queremos utilizar el comando L para crear una línea que se dibuja desde el punto de partida de nuestra ruta a lo largo del eje x para 28px. Para ello vamos a agregar nuestro segundo comando: L 46 3. Compruebe tu escuchar y usted debería ver una pequeña línea horizontal.
Ahora vamos a dibujar una línea hacia abajo para 37px agregando L 46 40.
Luego hacia la derecha por 15px con L 61 40
Continuación hasta tenemos que empezar a crear el punto de flecha. Tenemos que dibujar una línea diagonal hacia abajo y hacia la izquierda. Haremos esto con L 32 68.
Y entonces tendremos una línea volver diagonalmente hacia arriba y hacia la izquierda con L 40 3.
Ahora terminaremos nuestra cabeza de flecha dibujando formas un poco a la derecha otra vez con L 18 40.
Para cerrar nuestra forma a que no es necesario especificar un punto para trazar una línea. Todo lo que necesitamos hacer es añadir el comando Z, que se cerrará automáticamente nuestra forma para nosotros.

Su código de ruta de la flecha final debe verse así:

1	<path d="
2	M 18 3
3	L 46 3
4	L 46 40
5	L 61 40
6	L 32 68
7	L 3 40
8	L 18 40
9	Z
10	"></path>

Para obtener más información sobre el trabajo con <path> revisa las referencias en la parte inferior de la página.

Please accept marketing cookies to load this content.

8. Añadir `<defs>` Elemento

Estamos todos hacer codificación de nuestros seis iconos, así que ahora nos podemos prepararlos para colocación y reutilización en nuestro SVG.

Para ello vamos a envolver el código para las seis, los iconos (actualmente comentados), con las etiquetas <defs> </defs>:

1	<defs>
2	<!-- All the icons you created so far go in here -->
3	</defs>

Esto le indica al sistema que todos los iconos que hemos hecho están ocultar por defecto, hasta que explícitamente las utilizamos.

Usted puede ahora quite el comentario de cada uno de los iconos y no verse en la página.

9. Crear Grupos con `<g>`

Podemos hacer nuestros iconos listo para usar de dos maneras: mediante la conversión de los grupos, o en símbolos. Le daremos vuelta a la primera mitad de los iconos en grupos y la segunda mitad en símbolos por lo que podemos ilustrar la diferencia.

Para convertir uno de nuestros iconos en un grupo todo lo que tenemos que hacer es envolver con <g></g> tags. Para que ese grupo utilizable también necesitamos darle una identificación único.

Por ejemplo:

1	<g id="leftalign">
2	<!-- Left align icon made with lines -->
3	<line x1="3" y1="3" x2="48" y2="3"></line>
4	<line x1="3" y1="19" x2="65" y2="19"></line>
5	<line x1="3" y1="35" x2="48" y2="35"></line>
6	<line x1="3" y1="51" x2="65" y2="51"></line>
7	</g>

Envuelva cada uno de los primeros tres iconos con <g></g> etiquetas y agregar identificadores únicos, como:

1	<g id="leftalign">
2	<!-- Left align icon made with lines -->
3	<line x1="3" y1="3" x2="48" y2="3"></line>
4	<line x1="3" y1="19" x2="65" y2="19"></line>
5	<line x1="3" y1="35" x2="48" y2="35"></line>
6	<line x1="3" y1="51" x2="65" y2="51"></line>
7	</g>
8
9	<g id="rightcaret">
10	<!-- Right caret icon made with a polyline -->
11	<polyline points="
12	3 3
13	30 28
14	3 53
15	"></polyline>
16	</g>
17
18	<g id="browser">
19	<!-- Browser icon made with rectangle and lines -->
20	<rect x="3" y="3" width="80" height="60"></rect>
21	<line x1="3" y1="19" x2="83" y2="19"></line>
22	<line x1="20" y1="3" x2="20" y2="17"></line>
23	</g>

10. Coloque Grupos Con `<use>`

Ahora tenemos tres iconos definidos como grupos en nuestro elemento de <defs>, así que estamos listos para su uso en nuestro SVG. Para lograr esto, todo lo que necesitamos hacer es añadir un <use> elemento (asegurándose de que se añada después y fuera de la <defs> elemento) y un atributo href para orientar la identificación. del icono deseado.

Por ejemplo, utilizar la izquierda alinea el icono de añadir este código:

1	<use href="#leftalign"></use>

Para agregar el icono en una ubicación específica x e y atributos:

1	<use href="#leftalign" x="100" y="100"></use>

El código para añadir todos los tres iconos y espacio ellos aparte se vería algo como esto:

1	<use href="#leftalign" x="100" y="100"></use>
2
3	<use href="#rightcaret" x="300" y="100"></use>
4
5	<use href="#browser" x="500" y="100"></use>

Revise su navegador y usted debería ver los tres primeros iconos:

11. Crear Símbolos Con `<symbol>`

En lugar de utilizar grupos para definir los iconos también puede utilizar símbolos. Los símbolos son casi lo mismo que los grupos, sin embargo acceder a opciones adicionales para controlar el negatoscopio y relación de aspecto.

Esto puede ser muy útil si quieres hacer cosas como centrar los iconos que hemos creado hasta ahora. A los restantes tres iconos se vuelven símbolos, después ajustar verticalmente a llenar un espacio alto y 100px y estar centradas horizontalmente en ese espacio.

Creamos nuestros símbolos de la misma manera como los grupos, sólo nos va envolviendo cada uno del código de nuestros últimos tres iconos en <symbol></symbol> tags. También necesitaremos añadir un único ID a cada una.

Sin embargo lo que también vamos a añadir es un atributo viewBox. Esto nos definirá lo que debe ser la parte visible de cada símbolo. Cuando el navegador se accede a esta información puede escalar y alinear correctamente los símbolos.

Tendremos que dar nuestra viewBox de cuatro valores de atributo. Los dos primeros se define la parte superior izquierda de nuestro icono y el tercero y cuarto definir su anchura y altura respectivamente.

A partir de nuestro ícono de "alert", su anchura y altura son ambos 86px así estableceremos su viewBox a 0 0 86 86 así:

1	<symbol id="alert" viewBox="0 0 86 86">
2	<!-- Alert icon made with ellipses and a line -->
3	<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
4	<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
5	<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
6	</symbol>

El icono de "play" es también 86px en anchura y altura, y el icono de "Descargar" es ancho 71px por alto 64px. Por lo tanto debe ser el código correspondiente para nuestros símbolos:

1	<symbol id="alert" viewBox="0 0 86 86">
2	<!-- Alert icon made with ellipses and a line -->
3	<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
4	<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
5	<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
6	</symbol>
7
8	<symbol id="play" viewBox="0 0 86 86">
9	<!-- Play icon made with ellipse and polygon -->
10	<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
11	<polygon points="35 23, 60 43, 35 63" />
12	</g>
13
14	<symbol id="download" viewBox="0 0 64 71">
15	<!-- Download icon made with path -->
16	<path d="
17	M 18 3
18	L 46 3
19	L 46 40
20	L 61 40
21	L 32 68
22	L 3 40
23	L 18 40
24	Z
25	"></path>
26	</symbol>

12. Coloque los Símbolos Con `<use>`

Ahora podemos utilizar los iconos de nuestro símbolo de la misma manera como hicimos nuestros grupos. Sin embargo, también vamos a ofrecer cada uno con ancho y atributos de altura establecido en 100:

1	<use href="#alert" x="100" y="200" width="100" height="100"></use>
2
3	<use href="#play" x="300" y="200" width="100" height="100"></use>
4
5	<use href="#download" x="500" y="200" width="100" height="100"></use>

Verás que cada uno de los iconos del símbolo base perfectamente llena y se alinea en su 100px por 100px espacio:

Trate de aplicar atributos de widht y height a los elementos de <use> de uno de los iconos de grupo. Te darás cuenta de que nada cambia. Esto es porque el navegador se basa en valores de viewBox, (que no puede tener un grupo), para saber los iconos de la escala.

Terminando

Aquí está cómo debe buscar el código completo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style>
  html, body {
    height: 100%;
    width: 100%;
    background: #e9e9e9;
  }
  body {
    margin: 0;
    text-align: center;
  }
  .grid {
    width: 750px;
    height: 500px;
    margin: 0 auto;
    padding-top: 100px;
    padding-left: 100px;
    background-image: url('grid.png');
    position: relative;
  }
  .grid::before {
    content: "";
    border-left: 1px solid #7c7cea;
    position: absolute;
    top: 0;
    left: 100px;
    width: 750px;
    height: 600px;
  }
  .grid::after {
    content: "";
    border-top: 1px solid #7c7cea;
    position: absolute;
    top: 100px;
    left: 0;
    width: 850px;
    height: 500px;
  }
  svg {
    stroke: rgb(0, 0, 0);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }
  </style>
</head>
<body>

<div class="grid">

<svg width="750" height="500">

<defs>

<g id="leftalign">
<!-- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
"></polyline>
</g>

<g id="browser">
<!-- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>

<symbol id="alert" viewBox="0 0 86 86">
<!-- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
<!-- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
<!-- Download icon made with path -->
<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>
</symbol>

</defs>

<use href="#leftalign" x="100" y="100"></use>

<use href="#rightcaret" x="300" y="100"></use>

<use href="#browser" x="500" y="100"></use>

<use href="#alert" x="100" y="200" width="100" height="100"></use>

<use href="#play" x="300" y="200" width="100" height="100"></use>

<use href="#download" x="500" y="200" width="100" height="100"></use>

</svg>

</div>

</body>
</html>

Cubre lo esencial de mano código SVG! Vamos a recapitular y resumir lo que hemos aprendido:

Configuración de su <svg> elemento para envolver el gráfico entero.
Uso <line> y <polyline> para crear líneas.
Uso <rect>, <ellipse> y <polygon> para crear formas cerradas.
Uso <path> para crearlo que quieras.
Grupo de formas con el <g> elemento.
Para el grupo como comportamiento con características adicionales, utilizar <symbol>
Uso el <defs> elemento para definir los símbolos reutilizables y grupos.
Colocar sus símbolos reutilizables definidos grupos y con el <use> elemento.

Aprendimos algunas bases sólidas en este tutorial, pero hay mucho más que puedes hacer con SVG por lo que no se detienen aquí, mantener excavación y descubrir más de las cosas impresionantes que pueden lograrse.

Mientras tanto, esperemos que ya no sientes enteramente dependiente en aplicaciones de diseño vectorial para la creación de SVG, y está confiado a producir algunos de sus propios gráficos a mano. Para gráficos más complejos, aplicaciones de diseño siguen siendo el camino a seguir, pero hay mucho que puedes hacer con los bloques de construcción que tiene a su disposición, aprovechando la velocidad y control mano codificación trae.

Enlaces Relacionados:

Referencia del elemento SVG completo
<svg> Referencia del elemento
<line> Referencia del elemento
<polyline> eferencia del elemento
<rect> Referencia del elemento
<ellipse> Referencia del elemento
<polygon> Referencia del elemento
<path> Referencia del elemento
d Referencia del atributo
<defs> Referencia del elemento
<g> Referencia del elemento
<use> Referencia del elemento
<symbol> Referencia del elemento

Cómo Codificar a Mano SVG

Elementos SVG Básicos

Archivos de Arranque

Primer rápido en x y y valores

La Cuadrícula de Fondo

Estilo SVG por Defecto

1. Instalación del SVG

2. Crear el Icono "Alinear a Izquierda "

Comente Sus Iconos Como Vamos

3. Crear un Icono de "Cursor a la Derecha"

4. Crear un Icono de "Buscar"

5. Crear un Icono de "Alerta"

6. Crear un Icono de "Play"

7. Crear un Icono de "Descargar"

Codifica Su Icono de Descarga

8. Añadir <defs> Elemento

9. Crear Grupos con <g>

10. Coloque Grupos Con <use>

11. Crear Símbolos Con <symbol>

12. Coloque los Símbolos Con <use>

Terminando

Enlaces Relacionados:

Primer rápido en `x` y `y` valores

8. Añadir `<defs>` Elemento

9. Crear Grupos con `<g>`

10. Coloque Grupos Con `<use>`

11. Crear Símbolos Con `<symbol>`

12. Coloque los Símbolos Con `<use>`