En este artículo, explicaremos el concepto de gráficos en HTML5. Los gráficos son representaciones utilizadas para hacer que la página web o las aplicaciones sean visualmente atractivas y también para mejorar la experiencia del usuario y la interacción del usuario. Algunos ejemplos de gráficos son fotografías, diagramas de flujo, gráficos de barras, mapas, dibujos de ingeniería, planos de construcción, etc. Por lo general, las siguientes tecnologías se utilizan en gráficos web con HTML5 Canvas API, WebCGM, CSS, SVG, PNG, JPG, etc.
SVG (gráficos vectoriales escalables)
- Estas son imágenes creadas por un lenguaje de marcado que son imágenes independientes reutilizables, simples y de alta calidad que también se pueden exportar e importar.
- Son compatibles con todos los navegadores y se pueden usar tanto en el lado del cliente como en el lado del servidor de la aplicación.
- Se pueden manipular para crear animaciones, imágenes híbridas, etc. editando el lenguaje de marcado o editando usando una hoja de estilo.
- Los archivos vienen con una extensión .svg.
Ejemplo: Lo siguiente demuestra el SVG en forma de marcado.
HTML
<!DOCTYPE html> <body> <svg width="550" height="50" viewBox="0 0 550 50" fill="green" xmlns="http://www.w3.org/2000/svg"> <text x="0" y="20">I love GeeksforGeeks</text> <svg> </body> </html>
Producción:
texto SVG
PNG (Gráficos de red portátiles)
- Son portátiles, estáticos y sin pérdidas con un control de color indexado adecuado.
- Los archivos vienen con una extensión .png o .PNG.
- Es compatible con todos los navegadores y tiene capacidades de transmisión.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210729182205/Component1-300x258.png" > </img> </body> </html>
Producción:
JPG o JPEG (Grupo Conjunto de Expertos Fotográficos)
- Comprimido con pérdida con un grado ajustable de compresión.
- Se utiliza principalmente con phorography digital y puede lograr una compresión de 10:1.
- Los archivos vienen con una extensión .jpg o jpeg.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210729183033/Component2-300x189.jpg" > </img> </body> </html>
Producción:
CSS (hojas de estilo en cascada):
- Este es un tipo de lenguaje utilizado principalmente para el diseño de elementos HTML y SVG mediante el uso de código.
- Son escalables y dan más espacio para la creatividad al usuario.
- Los archivos generalmente vienen con una extensión .css.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"></link> </head> <body> <div class="star"></div> </body> </html>
styles.css: el siguiente código se usa en el archivo HTML anterior.
body {
position: relative;
}
.star {
position: absolute;
width: 423px;
height: 384px;
left: 456.7px;
top: 80.34px;
background: #346d33;
transform: rotate(18.69deg);
}
Producción:
- No tiene DOM y utiliza métodos basados en vectores para crear objetos, gráficos y formas.
- Las aplicaciones Canvas API pueden ser independientes o integradas con HTML o SVG.
- Ampliamente utilizado para juegos.
- Secuencias de comandos del lado del cliente con compatibilidad nativa con navegadores modernos.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <canvas id="canvas1" width="400" height="200" style="border:2px solid green; border-radius:35px"> Your browser does not support the canvas element. </canvas> </body> </html>
Producción:
WebCGM (metarchivo de gráficos de computadora web)
- Muy similar a SVG cuando se trata de características gráficas.
- CGM es el estándar ISO para la definición de imágenes vectoriales.
- Utilizado en aeronáutica, ingeniería de automoción, ilustración técnica, etc.
- No son muy utilizados tradicionalmente. Los enfoques más modernos han sido usar SVG, Canvas, etc.
Por lo tanto, los gráficos se utilizan para crear una página web, una aplicación o cualquier elemento digital que necesite una interacción visual, especialmente basada en HTML5, necesita gráficos para la mejor experiencia del usuario.
Publicación traducida automáticamente
Artículo escrito por dikshapatro y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA