Que es, como editarlo y convertirlo

Cualquiera que decida crear un sitio web, ya sea un diseñador web profesional o un aficionado, debería trabajar con él. 4 elementos principales Lo usará para crear el diseño y la apariencia de Internet. Estos elementos son texto, imágenes, colores y fuentes.

Luego podemos agregar más árbol y otros elementos multimedia como videos, documentos PDF, etc., pero estos cuatro pilares son fundamentales.

De los cuatro pilares, el que tiene mayor impacto en el impacto visual final dibujoLa diferencia entre usar imágenes de alta calidad y usar otras imágenes de estiércol de vaca es enorme.

En un mundo donde hay nombres específicos, las imágenes web tienen una serie de pautas y guías de usuario para aprovecharlas al máximo con el menor impacto en el rendimiento.

Si sigues este blog, es posible que ya sepas que las imágenes son uno de los elementos que mayor impacto tiene en la optimización del sitio web.

Suelen existir dos tipos de imágenes: Imágenes vectoriales y rásterEl primero se basa en píxeles dispuestos en una cuadrícula, mientras que el segundo se compone de líneas, curvas y otras formas geométricas.

Estos dos grupos generales tienen diferentes Formato de imagen,siguiente:

• Mapa de bits: BMP, JPG, GIF, PNG, RAW, TIFF o WEBP.
• Vector: EPS, AI (Adobe Illustrator), CDR (Corel Draw) o DXF (Autocad).

Algunos se utilizan para fotografía, otros para diseño gráfico y otros para edición y producción, pero se utilizan únicamente para diseño web. Lo más común hoy en día es Formato PNG y JPG.

Aunque por un tiempo Nuevo formato Quién comenzará la guerra y será el centro de atención de muchas maneras: SVG...

¿Nunca has oído hablar de este formato? ¿Notaste sus errores? ¿Quieres saberlo todo sobre él?

¡Vamos al ruedo, aquí hay un toro para pelear!

¿Qué es SVG y para qué sirve?

SVG (Abreviado Gráficas vectoriales escalables O gráficos vectoriales escalables) Formato de archivo de código abierto gratuito para crear gráficos vectoriales 2D.

Es un formato estandarizado utilizado por el W3C (Consorcio Mundial de la red), una organización líder en estándares de redes internacionales; Biblia mundial conectada, guau. Tambien esta completo Admite todos los navegadores web Actual.

Ese Formato SVG Basado en XML (lenguaje de marcado expandible O Lenguaje de marcado extensible), un lenguaje de marcado utilizado para describir datos. No utiliza etiquetas predefinidas (por ejemplo, con HTML) y es fácil de manejar y usar. Es tan simple que es fácil de ver para los humanos de un vistazo.

Así que puedes Buscar, indexar, escribir o comprimir, Por ejemplo. Además, todos se pueden crear y editar utilizando editores de texto y herramientas de dibujo vectorial.

Así como HTML usa una estructura de árbol con etiquetas, atributos o elementos, el formato de archivo SVG usa este tipo de estructuras para representar visualmente los datos. SVG Podemos decir que HTML se refiere a texto y gráficos a gráficos.

Un documento SVG simple consiste en un elemento raíz

Con SVG puedes crear 3 tipos de objetos: Vector, imagen y texto.

La versión actual del formato SVG (En el momento de escribir este artículo, es 1,1) Habilita formas básicas (como círculos, rectángulos o polígonos), texto, trazados, rellenos, degradados, efectos e incluso animación e interactividad.

Ejemplo de SVG de creación de un círculo con código:

Un ejemplo de SVG con código para crear un rectángulo:

SVG Ocupa el espacio que dejó el formato Flash (creado por Adobe) hace mucho tiempo y se puede utilizar para expresar animaciones y efectos de alta calidad con muy poco peso.

La diferencia entre SVG y Flash es que hay Basado en formatos abiertos como XML -Archivo binario no cerrado: todos los navegadores pueden estandarizarse y ser comprensibles, lo que no es el caso de Flash. Además, está diseñado para funcionar con otros estándares W3C como CSS, DOM y SMIL, por lo que su mundo está a sus pies.

Cualquiera que desee saber más sobre toda la información sobre el formato SVG puede acceder a numerosos documentos en el W3C y Mozilla Developer Network.

Ventajas y desventajas de SVG

Ese SVG Eso es nuevo Formato de imagen de red Si bien también tiene algunos inconvenientes menores a tener en cuenta, sus ventajas son las más notables.

Beneficios de SVG

Mayor potencial Formato SVG Vive en tu Portabilidad y versatilidad. En el contexto de los diseñadores y desarrolladores web obsesionados con la optimización de WPO, se crearon archivos SVG para realizar esta tarea.

Además, como archivos que contienen código, se comportan como cualquier otro elemento en Internet y pueden ser reconocidos por las arañas de Google, agregando así al lado SEO de nuestro sitio web.

Pero eso no es todo. Estos y muchos otros ventaja He enumerado esto para ti:

• SVG es Estándar abiertoque conducirá a futuras mejoras y actualizaciones.
• El archivo SVG puede ser Crear y editar Con editor de texto y programa de edición de imágenes vectoriales.
• Usted puede Búsqueda e índice En Internet.
• generalmente, Su peso es muy ligero; Más pequeño que los formatos PNG y JPG.
• Usted puede Optimización y compresión.
• Usted puede incrementar No hay pérdida de calidad.
• Están bien representados en Cualquier dispositivo, También con pantalla retina.
• Usted puede Para presionar En cualquier resolución sin pérdida de calidad.
• imagen "Generado" por el navegadorEsto reduce la carga y el consumo de recursos en el hosting.
• Puede crear texto, Se puede seleccionar, copiar e indexar.
• Permitir la creación animación Combina SVG con CSS o Javascript.
• Puede crear Versión interactiva...

Contras de SVG

Ahora quiero decirte algo defecto Aunque hay pocos, honestamente debemos ponerlos sobre la mesa.

• Si bien todos los navegadores modernos ahora están listos para interpretar el formato SVG, gracias a la estandarización W3C, las primeras versiones de algunos de los navegadores más populares No puedo explicar bien todos los temas.
• Si el archivo SVG es muy complejo (capas, máscaras de recorte, muchos objetos ...) puedes crearlo Documentos más pesados Por ejemplo, es diferente de un SVG "plano" con un objeto del mismo color. Por lo tanto, es más recomendable usarlo para formularios simples.
• Si descarga el archivo SVG de una fuente no confiable, puede obtener Código malicioso... No olvidemos que SVG es un formato XML y por lo tanto viene con código.
• Por razones de seguridad, WordPress no admite la carga de archivos SVG. Defecto. Para hacer esto, necesita un complemento como Instale Safe SVG.

• Incluso los modelos visuales como Elementor no permiten que los archivos SVG se carguen de forma predeterminada, debe correr el riesgo.

Archivo de muestra SGV

Para ayudarlo a comprender el potencial de los archivos SVG, aquí hay algunos sitios web para probar sus opciones de animación o interacción:

Herramientas para crear y editar SVG

Al agregar elementos simples basados ​​en SVG a la web, podemos insertar el código para representarlos directamente en la página.

Si prefiere usar Herramientas para crear archivos SVG Luego cárguelo en línea. Puede usar un editor de texto simple o una herramienta de dibujo para crear SVG. Echemos un vistazo a ellos:

Mo Jing

Podemos decir que Inkscape es una herramienta "genial". Crea un archivo SVGPorque es recomendado por el W3C.

Inskcape es una herramienta de escritorio gratuita para Windows, Mac y Linux. Puede usarlo para crear y editar archivos SVG de una manera bastante intuitiva.

Tiene muchas opciones y características, lo que lo convierte en el más completo.

vector

Esta herramienta está en un buen nivel, solo superada por Inkscape, y la herramienta más avanzada que he probado. Ofrece más opciones que otros. Crea, edita y personaliza imágenes SVG.

Con Vectr puede mostrar diferentes elementos en una capa y crear archivos con varias páginas. También le brinda muchas opciones para crear objetos complejos.

Edición de SVG

Herramientas gratuitas de código abierto para descargar desde la siguiente URL GitHub.

Contiene herramientas para dibujar, crear formas básicas, rellenar o agregar texto, etc. Le permite crear capas y proporciona una biblioteca de algunos objetos.

Además de SVG, también puede exportar resultados a otros formatos de imagen y PDF.

También puede probar la versión en línea si lo desea.

Método de dibujo

Una herramienta en línea muy simple con opciones muy simples, pero que puede ayudarlo a crear fácilmente algunos elementos SVG simples para comenzar.

Ilustrador Adobe

Illustrator es un programa de diseño vectorial. Junto con PhotoShop, bajo la protección del desarrollador Adobe, forma el par de herramientas de creación y edición de imágenes más poderosas del mercado.

Con Illustrator, puede Crea imágenes SVG de cualquier tipoPara proporcionar el mejor programa de diseño vectorial que existe.

Illustrator es de pago, pero puedes probarlo gratis durante 7 días.

Cómo comprimir imágenes SVG

Aunque el peso de una imagen SVG ya es muy ligero, siempre se puede optimizar para reducir una cierta cantidad de kilobytes, y esos kilobytes siempre afectan la optimización del sitio web.

Para optimizar y reducir el peso de los SVG, recomiendo usar la herramienta SVG Optimizer.

Ejemplo: La imagen SVG a continuación era originalmente de 9 KB, pero la compresión deja 6 KB. Como puede ver, la pérdida de calidad es completamente nula y hemos agregado 3 KB.

Descarga gratuita de SVG

Hay varios sitios web en Internet donde puede encontrar archivos SVG que desea descargar y agregar a una página web.

Antes de hablar de eso, quiero recordarles que uno de los inconvenientes de los archivos SVG es que pueden contener código malicioso. Por lo tanto, cada vez que cargue archivos SVG, ejecute siempre su software antivirus y use el complemento Safe SVG para cargarlos en su WordPress.

Si encuentra un problema de infección en WP, hay algunos pasos que debe seguir para que su sitio web sea seguro nuevamente.

En otras palabras, veremos algunos sitios web donde puede encontrar muchos recursos SVG.

Libre elección

Freepik es sin duda el sitio web de recursos gráficos y diseño web más famoso y ampliamente utilizado.

Puede descargar miles de recursos gratuitos y de pago en una variedad de formatos de imagen, incluido SVG (por supuesto).

Icono plano

Podemos decir que Flaticon es la versión icónica de Freepik. De hecho, todos pertenecen a la misma empresa.

En Flaticon puedes Más de 3.000.000 de símbolos Todos los estilos son una locura y se pueden descargar como PNG, SVG, JPG o EPS.

Al igual que con Freepik, hay iconos gratuitos y de pago.

Íconos de contenido de Google

De lo contrario, Google también se está ocupando de algunas pequeñas cosas relacionadas con el proyecto SVG y nos proporciona una serie de iconos SVG que podemos usar en nuestro sitio web.

Todos los símbolos son vectoriales y escalables y puedes asignarles cualquier color usando CSS.

La colección incluye más de 1,500 íconos SVG que puede descargar a su computadora desde GitHub en formato ZIP o por separado de Material.io.

Icono 8

En esta página encontrará Más de 130.000 iconos divididos en 33 estilosPuede descargar formatos SVG, PNG, PDF o incrustarlos en su sitio web junto con HTML.

También puede editar colores, agregar elementos o ajustar bordes gracias a la integración con su propia herramienta de diseño gratuita Lunacy.

Símbolos de búsqueda

En esta página puede visitar Más de 4.600.000 símbolos Gratis y de pago en varios formatos como SVG, PNG, ICO o AI (Adobe Illustrator).

Los controles son muy similares a Freepik o Flaticon, con un cuadro de búsqueda y varias opciones de filtro, incluido un filtro para separar los iconos en Free o Professional.

Cola creativa

Puedes encontrar miles de Símbolo super creativo Puedes subir diferentes formatos como SVG, PNG o JPG.

Para acceder a la descarga gratuita, solo necesita registrarse por correo electrónico.

casi lo sé

Aunque Pixabay es mejor conocido por su biblioteca de mapas de bits, tiene una gama bastante amplia de gráficos vectoriales 100.000 piezas Puede descargar SVG o PNG gratis.

Más opciones para descargar Paquetes SVG

A continuación, le proporcionaré enlaces a otros sitios web. Descargar icono o imagen Completamente cargado:

• Drawkit: Gráficos e iconos muy creativos y variados.
• Hamburguesa gráfica: Iconos atractivos en diferentes estilos y temas.
• Humaaans: ilustración vectorial de personas.
• Ionicons: paquete de iconos de estilo plano hecho a mano con tres versiones: contorno, relleno y nitidez.
• Social Icons JustVector: Conjunto de iconos sociales en formato plano.
• Metrize Icons: contiene más de 300 iconos de estilo plano muy interesantes en varios formatos.

Cómo convertir SVG a otro formato y viceversa

Si quieres Convertir archivos SVG En un formato o forma diferente, deberá usar una de las herramientas anteriores, si desea ajustar algo manualmente, o seleccionar una opción de las opciones disponibles en la red donde realizará una conversión automática.

En esta sección, le mostraré algunos sitios web que pueden realizar conversiones automáticamente. Con estas herramientas, puede realizar (al menos) las siguientes conversiones entre los formatos más populares: SVG a PNG, De PNG y SVG, De SVG a JPG con JPG y SVG...

• SVG a PNG: una herramienta especial para convertir SVG a PNG.
• SVG a JPG: Igual que la herramienta anterior, excepto que convierte SVG a JPG.
• Conversión en línea: puede convertir entre SVG, PNG, JPG, etc.
• Convertio: convierta archivos a varios formatos, incluidos SVG, PNG y JPG.
• Conversión en línea gratuita: convierta imágenes a SVG, JPG, PNG, EPS, PSD, etc.

Un ejemplo del uso de Vector Magic para convertir una imagen a SVG:

La conversión entre archivos usando cualquiera de las herramientas anteriores es muy fácil:

1. Cargar imagen.
2. Haces clic en el botón "Convertir".
3. Descarga los resultados.

Pero hay otra herramienta que puede Convierta cualquier imagen PNG, JPG o GIF a formato vectorial Además, también puede ajustar algunos parámetros y editar el resultado final. El archivo de salida puede ser SVG, EPS y PDF.

Esta herramienta es Vector Magic y el proceso es el siguiente:

• Sube una imagen o arrástrala y suéltala en la web.

• El editor se carga y puede realizar algunos ajustes simples en él para comparar el resultado original con el resultado final.

• También haga clic en la opción Avanzado> Editar resultados Puede editar manualmente los gráficos de salida para definir mejor el aspecto final.

• Carga los resultados en formato vectorial que solo se pueden cargar o rastrear.

Cómo agregar SVG a su WordPress

Una vez que haya completado todo el proceso de creación, edición o carga de imágenes SVG, querrá agregarlas a su sitio web. Puede cargarlos usando las secciones a continuación Medios de comunicación en masa Descárgalos desde el sitio web o mediante el administrador de archivos de host de WordPress.

Se pueden integrar con WordPress de dos formas:

Agregar código con HTML

Agregar código con HTML es tan fácil como abrir el SVG en un editor, copiar el código y agregarlo directamente al editor HTML de WordPress. A continuación se muestra un ejemplo del código SVG del logotipo de Facebook:

Adición de archivos mediante diseño visual (Creador de páginas)

Otra forma de usar imágenes SVG al crear sitios web en WordPress es a través de Medios de comunicación en masa Y agregarlo con una herramienta que permita por ejemplo Elemento.

Eche un vistazo a la siguiente imagen:

Si es diseñador web, use Elementor para crear un elemento como icono y arrástrelo y suéltelo en su diseño. En este punto, se abrirá el botón de opción y podrá personalizarlo.

Como se muestra en la imagen, hay un bloque que puede usar para agregar imágenes. Si miras de cerca, encontrarás un botón con el nombre. Subil SVGHaga clic y agregue su archivo SVG. Use esto si es necesario y ahora cargue todos los archivos SVG que necesita en la biblioteca.

También con elemento Puede cambiar el color de los iconos SVG para cambiar con CSS usando las opciones en la pestaña estilo...

finalmente

Como puede ver, el formato SVG ha llegado como un torbellino, y creo que va a tener mucho contenido discutible, más que ahora.

Su potencial, combinado con calidad y bajo peso, lo hace posible Los sitios web son más poderosos y atractivos No tendrá un gran impacto en el rendimiento. Solo utilícelos correctamente y modifíquelos como otros formatos.

SVG es la combinación perfecta de diseño y desarrollo web. Parece un súper soldado en Dragon Ball Z.

He usado mucho SVG en los diseños de sitios web de clientes. ¿Y usted?

Dime si te gusta este pequeño post a continuación Observaciones Con gusto te contestaré con una cerveza en una mano y un pinchito en la otra.

Gracias por estar aquí y Raiola Networks por la oportunidad de dejar mis dos centavos en su blog. ¡Fuerza y ​​honor!