Cómo exportar patrones SVG

Solía ​​ser que simplemente podías eliminar 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 manera rápida y fácil de agregar un patrón o textura a su trabajo. Entonces esos cuerpos molestos en Apple lanzaron pantallas de retina y antes de que lo supiéramos el píxel no era un píxel más tiempo. De repente, esos patrones amados 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 acomodar dispositivos Retina. Son realmente divertidos y fáciles de crear, y abren un mundo de posibilidades ...

Paso 1: crea un patrón

Hay docenas de aplicaciones diferentes que le 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 que sea 300px por 300px. Luego, vaya a Objeto> Patrón> Crear y su lienzo cambiará. Notarás que habrá un cuadrado azul en el medio de tu mesa de trabajo. Además, el Panel de Opciones de Patrones estará abierto.

Tendremos que hacer un pequeño ajuste antes de comenzar. Dirígete al Panel de Opciones de Patrones y desmarca la opción que dice Mover Azulejos con Arte. (Esta característica es molesta, porque no podrá mover ni colocar su obra de arte dentro del cuadro de patrones. 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. Por defecto, el cuadrado del patrón está establecido en 100px x 100px. Puede marcar el tamaño que desee. Dejé el mío por defecto.

Luego, dibuja un cuadrado, a 50px por 50px. Alinealo con los bordes superior e inferior del cuadrado.

A continuación, haz clic y mantén presionado el mouse sobre la herramienta Pluma . Aparecerán herramientas secundarias, donde puede seleccionar Agregar herramienta de punto de anclaje . Desde aquí, agregue un punto de anclaje al centro de los lados izquierdo y derecho del cuadrado.

Con la herramienta Selección directa , seleccione los puntos de anclaje (mantenga presionada la tecla shift para seleccionar ambos). Luego, desde el menú superior, seleccione Objeto> Transformar> Mover.

Mueva los dos puntos 20px a la derecha para formar una especie de flecha.

Luego, duplica la forma arrastrándola a una nueva posición mientras mantienes presionada la tecla alt . (O copie y pegue si lo prefiere).

Seleccione la nueva forma y arrástrela a la esquina inferior izquierda del cuadro de patrones.

Con la forma aún seleccionada, tome una esquina y gírela 180 grados. (Mantenga presionada la tecla Mayús 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 botón Guardar una Copia en la parte superior de la ventana, asigne un nombre al patrón y guárdelo para completar su patrón. Guardar una copia es importante si quiere editarla más tarde. Esto evita tener que volver a crear todo de nuevo.

Paso 2: exporta el patrón

Notará que una vez que sale del modo de patrón, el patrón se selecciona automáticamente como 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 en la forma, puede encontrar su patrón en el panel de muestras, aplicarlo como cualquier otro relleno).

A continuación, cambie el tamaño de su forma para que cubra todo el tablero de 300px por 300px.

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 soportado. 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, que puede ser útil. Tiene la opción de usar 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 Aceptar.

Paso 3: Edita el patrón SVG

Abra el archivo .svg en un editor de texto. Estoy usando Sublime Text, pero puedes usar Notepad, Dreamweaver o cualquier código HTML que tengas.

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 para enfocarse. Primero, necesitamos editar los límites del archivo SVG para que llene el navegador.

Verás: en el fondo. Cambie ambos valores de 300 a 100% en su lugar. Por lo tanto, su código se verá así:

No deberías notar un cambio todavía. Debería ser un cuadrado. ¿Por qué? Porque viewbox está establecido 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 0 300 300" a viewBox = "0 0 100% 100%" .

Cuando actualizamos el navegador, el patrón llena nuestro navegador de punta a punta. El problema es, ¿qué pasa si quieres cambiar el tamaño del patrón? ¿Vuelves a Illustrator y vuelves a hacer todo de nuevo? No. Esa es la belleza de tener a Illustrator generando su código SVG. Usted simplemente puede editar el código. No lo piense como un archivo de gráficos. Piense en ello como un archivo de código que puede manipular y doblar a su voluntad.

Para editar el tamaño del patrón, busque en la línea 5. Simplemente cambie los valores del ancho y la altura a cualquier cosa que desee. Yo recomendaría mantenerlo en proporciones cuadradas, a menos que quiera distorsionar su patrón. Cuando cambio los valores a 70, el patrón es más pequeño, pero aún llena el ancho y el alto de la pantalla.

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í está nuestro código SVG final:

Eso es perfectamente válido, pero es un poco desordenado (gracias Illustrator). Así que recomendaría optimizarlo antes de usarlo. Hay muchas opciones de optimización disponibles, pero Peter Collingridge's es uno de los mejores, nos da este código final:

Conclusión

Tener la capacidad de exportar 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, controlar colores, tamaños y cómo el archivo se procesa en el navegador.