SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

What is SVG?

gilon avatar
gilon
10 diapositives · 374 Views · Aug 04, 2014

What is SVG?. SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated

What is SVG? - slide 1
01 / 10What is SVG?
1 / 17

Télécharger la présentation

What is SVG?
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  1. What is SVG?

  2. SVG stands for Scalable Vector Graphics • SVG is used to define vector-based graphics for the Web • SVG defines the graphics in XML format • SVG graphics do NOT lose any quality if they are zoomed or resized • Every element and every attribute in SVG files can be animated • SVG is a W3C recommendation

  3. When using bitmaps • For modern browsers, add "max-width: 100%" to images so they scale down to fit within their containing element in a fluid layout • Bitmap images are composed of a fixed set of dots, while vector images are composed of a fixed set of shapes. Scaling a bitmap reveals the dots while scaling avector image preserves the shapes.

  4. Remember Bitmap (Raster) and Vector Graphics from an earlier unit?

  5. WHY Scalable Images? • Regardless of the method used, raster images remain inherently constrained by their bitmap resolution; they were never meant to be infinitely scalable. This is where vector graphics have the advantage, being a future-proof way to “Retinize” your Web graphics. • A single SVG image can be used as a universal asset, scaling infinitely up or down as required. This not only saves precious bandwidth (most SVG files tend to be smaller in size than standard-resolution PNGs), but also makes your graphic assets much easier to maintain.

  6. <svg> code

  7. SVG Example

  8. Advantages of using SVG over other image formats (like JPEG and GIF) • SVG images can be created and edited with any text editor • SVG images can be searched, indexed, scripted, and compressed • SVG images are scalable • SVG images can be printed with high quality at any resolution • SVG images are zoomable (and the image can be zoomed without degradation)

  9. What do you see online? • Most images on the Web are bitmaps; also known as raster graphics. • Bitmaps can be pre-scaled or resized so an appropriate size is displayed depending upon the viewport.

  10. Guidelines for Images • Avoid using images with inappropriate resolutions. • Pre-scale images in various resolutions and serve an image appropriate for the viewport. • When images are not scaled appropriately, they will appear blurry when scaled up • Images that are larger than necessary waste battery and cause longer downloads