Usar SVG para ayudar a prevenir la propagación del coronavirus

Para la demostración, haga clic aquí.

Para ver el Git del abuelo Rick, haz clic aquí.

Descargo de responsabilidad: esta aplicación está destinada a fomentar el único hábito de evitar tocarse la cara. No es una técnica integral para la prevención. Para obtener pautas más detalladas de la OMS, haga clic aquí.

No hay forma de evitar el estilo. Es un componente esencial de la presentación. Usamos imágenes para transmitir información importante en cualquier página web. Convencionalmente (.jpg, .gif, .png) la mayoría de las imágenes cargadas en el navegador están en formato de mapa de bits. Esto significa que el navegador es capaz de conocer el color de cada píxel. SVG (Gráficos vectoriales escalables) se almacena como un conjunto de instrucciones que el navegador interpreta como instrucciones. Entonces, no píxeles, sino instrucciones. Esto ayuda en el concepto de que el navegador no depende de los píxeles para la pantalla. Por lo tanto, la imagen se puede escalar sin desenfoque.

SVG también es más pequeño que las imágenes de mapa de bits, lo que significa menos tamaño. Los vectores se pueden usar para registros / formas. Entonces, para formas de cualquier tamaño, puede hacer un SVG, por lo tanto, escalable.

Pasos para acostumbrarse al concepto básico de SVG:

  1. Ven aquí
  2. Haz un rectángulo y un círculo (o cualquier forma).
  3. Color de relleno
  4. Obtenga el código de SVG
  5. Pegue el código en codepen.io o cualquier editor de texto para ver en el navegador.

Eso es todo, has generado tu primer SVG.

Consulte la imagen para ver el diseño del editor. Otros editores de SVG incluyen Inskape y Adobe Illustrator.

Para hacerlo más estructurado, sigamos adelante y creemos una aplicación que responda y que cambie las dimensiones de SVG al pasar el ratón. Haremos una imagen SVG del abuelo Rick enojándose cuando le toques la cara. El procedimiento se describe fácilmente en los siguientes pasos.

  1. Obtén el SVG. La forma más fácil de hacer un SVG se describe arriba. También hay convertidores SVG pero los resultados no corresponden a las imágenes.
  2. Pegue el SVG en el tú deseas.
  3. SVG contendrá por cada trazo de dibujo. Identifica el desea cambiar en el evento (como onClick o Hover).
  4. Inspeccione el elemento que desea cambiar. En nuestro caso, deseamos cambiar la forma de los labios para que el abuelo Rick se enoje cuando tocas (pasas) su rostro. Encuentra la clase o crea un nombre de clase.
  5. Juega en la pestaña Estilos en Chrome para ajustar el siguiente código. En este caso podemos transformar el elemento para rotar la sonrisa y también ajustar la posición (origen de transformación) y el color.
  6. Una vez que tenga la posición / color / forma correcta, continúe y agregue una propiedad de SVG: coloque el cursor sobre la clase en styles.css.

Y eso es. Ha creado con éxito su primer SVG interactivo. Las posibilidades de aquí en adelante son infinitas.

Visite viraj.info en caso de que tenga algún comentario o desee explorar más.