¿Es importante aprender SVG y Canvas en HTML? ¿Dónde se usan estas cosas?

Hola,

No es obligatorio usar svg y canvas, sin embargo, debe haber algo de ventaja al usar esto.

SVG dice que puede ser alterado, comprimido y manipulado para adaptarse a las necesidades de los usuarios.

  1. Sin pixelado / gráficos vectoriales: imagine que está trabajando en algunos proyectos para teléfonos inteligentes con soporte de resolución 4K donde necesita insertar iconos y gráficos. Como sabemos, los gráficos vectoriales escalables serán adecuados aquí para deshacerse de los problemas de rendimiento debido a la naturaleza liviana
  2. Soporte de animación: Svg y cavas admiten animación CSS.
  3. Gráficos dinámicos: D3.js conecta la compilación para representar la salida del vector y se basa totalmente en elementos de lienzo para mostrar diagramas, gráficos circulares, mapas, manejo de datos, y también convierte imágenes en lienzo, etc.
  4. Peso ligero: alinee svg con el texto y diga adiós a los iconos de fuente, elimine el uso de imágenes png y gif pesadas como logotipos, iconos, etc.

Aquí hay algunas buenas referencias:

“Hoja de trucos de HTML Canvas” @caxaria https://blog.codacy.com/html-can…

“Cómo deberían pensar los diseñadores sobre SVG” @pnowelldesign https://medium.com/sketch-app-so…

“Algunas palabras sobre SVG” https://medium.com/@order_group/a-few-words-about-svg-d979112ee33

Alguien bueno es mejor que nada 🙂

Gracias,

No es tan importante aprender svg y canvas a menos que esté trabajando en esa área de gráficos. Ambos se utilizan principalmente para visualizaciones de datos y juegos de navegador según mi conocimiento. He visto que los emoticonos se crean a partir de svg para aplicaciones de chat y algunas aplicaciones de edición de fotos utilizan la representación en lienzo.

Desde mi experiencia laboral, svg y canvas son muy utilizados para mostrar gráficos, mapas o cualquier visualización de datos en productos de software

Echa un vistazo a los siguientes sitios.

https://www.amcharts.com

https://d3js.org

Galería de gráficos | Gráficos
El | Desarrolladores de Google

Gráficos JavaScript para web, móviles y aplicaciones – FusionCharts
(Seguiré agregando la lista)