Tarea anterior
Fondos11/15
A la lista de tareas
  1. 1. La propiedad background-color
  2. 2. La propiedad background-image
  3. 3. La propiedad background-repeat
  4. 4. La propiedad background-position
  5. 5. Un poco más sobre background-position
  6. 6. La propiedad background-attachment
  7. 7. La propiedad background
  8. 8. Formato JPEG
  9. 9. Formato PNG-8
  10. 10. Formato PNG-24
  11. 11. Formato SVG
  12. 12. Formato GIF
  13. 13. Elementos anidados con fondos
  14. 14. Efectos con fondo repetido
  15. 15. Sprites
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Formato SVG

SVG (Scalable Vector Graphics) significa gráficos vectoriales escalables. La calidad de estas imágenes no cambia al modificar su tamaño y, además, suelen pesar poco. SVG es ideal para esquemas con pocos colores, logotipos e íconos.

Además, SVG se parece un poco a HTML: está descrito en un formato de texto legible para las personas. Es decir, también se puede escribir a mano.

En resumen, SVG conviene cuando:

  • necesitan escalar una imagen sin pérdida de calidad;
  • quieren cambiar el color de partes de la imagen;
  • necesitan animar algunos de sus elementos.
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Formato SVG</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box box1"> <div class="block"></div> </div> <div class="box box2"> <div class="block"></div> </div> <div class="box box3"> <div class="block"></div> </div> </body> </html>
CSS
.box { width: 300px; height: 140px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .box1 { background-color: #2ecc71; } .box2 { background-color: #f1c40f; } .box3 { background-image: linear-gradient(to bottom, #2ecc71, #f1c40f); } .block { height: 134px; background-repeat: no-repeat; background-position: 50% 50%; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Definan la imagen de fondo cat_vector.svg para los elementos con la clase block.

    © 2023-2026, codigoheroe.com