Cómo exportar patrones SVG
Solía ser que podía simplemente copiar una imagen enlosable como un gif o jpg a 72 ppp y colocarla en mosaico con CSS. Es una práctica común entre los diseñadores web y lo ha sido durante años; es una forma rápida y fácil de agregar un patrón o textura a su trabajo. Luego, esos molestos cuerpos de Apple lanzaron pantallas de retina y antes de que nos diéramos cuenta un el píxel no era un píxel más tiempo. De repente, esos amados patrones se convirtieron en historia.
Los SVG (gráficos vectoriales escalables) se están convirtiendo rápidamente en el estándar para gráficos nítidos en la Web. Resuelven el problema de tener que crear archivos de imagen separados para adaptarse a los dispositivos de retina. Son realmente divertidos y fáciles de crear, y abren un mundo de posibilidades …
Paso 1: crea un patrón
Hay decenas de aplicaciones diferentes que te permitirán diseñar un patrón SVG. Mi favorito es Illustrator, así que eso es lo que usaré.
Abra Adobe Illustrator y cree un nuevo documento de 300 px por 300 px. Luego ve a Objeto> Patrón> Hacer y tu lienzo cambiará. Notarás que habrá un cuadrado azul en el medio de tu mesa de trabajo. También el Panel de opciones de patrón estara abierto.
Tendremos que hacer un pequeño ajuste antes de comenzar. Vaya al Panel de opciones de patrón y desmarque la opción que dice Mueva el azulejo con el arte. (Esta función es molesta, porque no podrá mover o colocar su obra de arte dentro del cuadrado del patrón. Se moverá con ella si no desmarca esta opción).
A continuación, el cielo es el límite para el tipo de patrón que puede crear. De forma predeterminada, el patrón cuadrado se establece en 100 px x 100 px. Puede marcar en cualquier tamaño que desee. Dejé el mío por defecto.
A continuación, dibuja un cuadrado, de 50 px por 50 px. Alinéelo con los bordes superior y derecho del cuadrado.
A continuación, haga clic y mantenga el mouse sobre el Lapicera. Aparecerán subherramientas, donde puede seleccionar el Herramienta Agregar punto de ancla. Desde aquí, agregue un punto de anclaje al centro de los lados izquierdo y derecho del cuadrado.
Utilizando la Herramienta de selección directa, seleccione los puntos de anclaje (mantenga cambiar para seleccionar ambos.) Luego, en el menú superior, seleccione Objeto> Transformar> Mover.
Mueva los dos puntos 20px hacia la derecha para formar una especie de flecha.
A continuación, duplique la forma arrastrándola a una nueva posición mientras mantiene presionada la alt clave. (O Copiar y pegar si tu prefieres.)
Seleccione la nueva forma y arrástrela a la esquina inferior izquierda del cuadrado del patrón.
Con la forma aún seleccionada, tome una esquina y gírela 180 grados. (Mantenga presionado el cambiar clave para ajustar exactamente a 180 grados.)
En el menú superior, seleccione Objeto> Transformar> Mover y mueva la nueva forma -20px.
Finalmente, haga clic en el Guardar una copia en la parte superior de la ventana, nombre el patrón y guárdelo para completar su patrón. Guardar una copia es importante si desea editarlo más tarde. Esto evita que tenga que volver a crearlo todo de nuevo.
Paso 2: exporta el patrón
Notarás que una vez que salgas del modo de patrón, el patrón se selecciona automáticamente como tu relleno. Todo lo que necesita hacer es dibujar una forma en la mesa de trabajo y se rellenará con el patrón. (Si por alguna razón ha cambiado el relleno de la forma, puede encontrar su patrón en el panel de muestras y aplicarlo como cualquier otro relleno).
A continuación, cambie el tamaño de su forma para que cubra toda la mesa de trabajo de 300 px por 300 px.
Seleccione Archivo> Guardar como. Guarde su archivo como .svg.
A continuación, aparecerá un cuadro de diálogo, donde puede elegir entre diferentes formatos y opciones de SVG. Asegúrese de hacer clic en más opciones, en la esquina inferior izquierda, para ver todas las opciones disponibles para su archivo SVG.
El formato típico es SVG 1.1 porque es el formato SVG más utilizado y más ampliamente admitido. En este cuadro, también controlará si conserva o no la capacidad de editar el SVG en Illustrator, o si habilita el texto en una ruta, lo que puede ser útil. Tiene la opción de usar el SVG como un archivo real, o puede copiar el código y pegarlo directamente en su documento html. Una vez que haya terminado, haga clic en está bien.
Paso 3: edita el patrón SVG
Abra el archivo .svg en un editor de texto. Estoy usando Sublime Text, pero puedes usar el Bloc de notas, Dreamweaver o lo que sea que codifiques en HTML.
Abra el mismo archivo en un navegador para que pueda obtener una vista previa de los cambios que realice en el código.
Hay algunas áreas diferentes en las que enfocarse. Primero, necesitamos editar los límites del archivo SVG, para que llene el navegador.
Verás:
No deberías notar ningún cambio todavía. Todavía debería ser un cuadrado. ¿Por qué? Porque el cuadro de vista está configurado en 300 x 300, que son dimensiones cuadradas. Para llenar el ancho y alto del navegador, cambie el código en la línea 4 de viewBox = ”0 0300300 ″ a viewBox = «0 0100% 100%».
Cuando actualizamos el navegador, el patrón llena nuestro navegador de un extremo a otro. El problema es, ¿qué pasa si quieres cambiar el tamaño del patrón? ¿Vuelve a Illustrator y rehace todo de nuevo? No. Esa es la belleza de que Illustrator genere su código SVG. Simplemente puede editar el código. No lo considere simplemente un archivo gráfico. Piense en ello como un archivo de código que puede manipular y doblar a su antojo.
Para editar el tamaño del patrón, busque
Si miras el código, verás que el patrón está formado por polígonos. El primer polígono tiene un relleno de «ninguno» (que produce blanco) y el resto tiene valores hexadecimales.
Para cambiar los colores de nuestro patrón, todo lo que tenemos que hacer es cambiar los valores de relleno.
Si eres el tipo de persona a la que le gusta copiar y pegar, aquí tienes nuestro código SVG final:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100% 100%" enable-background="new 0 0 300 300" xml:space="preserve">
<pattern width="70" height="70" patternUnits="userSpaceOnUse" id="Unnamed_Pattern" viewBox="50 -100 100 100" overflow="visible">
<g>
<polygon fill="#c4e0d3" points="50,-100 150,-100 150,0 50,0 "/>
<g>
<polygon fill="#ff6596" points="200,-50 150,-50 130,-25 150,0 200,0 180,-25 "/>
</g>
<g>
<polygon fill="#0299a7" points="100,-50 150,-50 170,-75 150,-100 100,-100 120,-75 "/>
<polygon fill="#ff0a5c" points="100,-50 50,-50 30,-25 50,0 100,0 80,-25 "/>
</g>
<g>
<polygon fill="#ff7635" points="0,-50 50,-50 70,-75 50,-100 0,-100 20,-75 "/>
</g>
</g>
</pattern>
<rect fill="url(#Unnamed_Pattern)" width="100%" height="100%"/>
</svg>
Eso es perfectamente válido, pero es un poco complicado (gracias Illustrator). Así que recomiendo optimizarlo antes de usarlo. Hay muchas opciones de optimización disponibles, pero De Peter Collingridge es uno de los mejores, nos da este código final:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 100% 100%" enable-background="new 0 0 300 300" xml:space="preserve"><pattern width="70" height="70" patternUnits="userSpaceOnUse" id="Unnamed_Pattern" viewBox="50 -100 100 100" overflow="visible"><polygon fill="#c4e0d3" points="50 -100 150 -100 150 0 50 0 "/><polygon fill="#ff6596" points="200 -50 150 -50 130 -25 150 0 200 0 180 -25 "/><polygon fill="#0299a7" points="100 -50 150 -50 170 -75 150 -100 100 -100 120 -75 "/><polygon fill="#ff0a5c" points="100 -50 50 -50 30 -25 50 0 100 0 80 -25 "/><polygon fill="#ff7635" points="0 -50 50 -50 70 -75 50 -100 0 -100 20 -75 "/></pattern><rect fill="url(#Unnamed_Pattern)" width="100%" height="100%"/></svg>
Conclusión
Tener la capacidad de exportar sus muestras y patrones de Illustrator como SVG abre una gran cantidad de posibilidades. No solo puede crear un patrón SVG, puede editar el archivo en cuestión de minutos, controlando colores, tamaños y cómo se procesa el archivo en el navegador.
