Kenhuang Academy
  • English

      • SVG Introduction

      SVG (Scalable Vector Graphics) is an XML-based vector image format for describing two-dimensional graphics. Unlike raster images (such as PNG, JPEG), SVG images can scale infinitely without losing quality, making it an essential technology in modern web development.

      What is SVG?

      SVG is an open standard developed by the W3C (World Wide Web Consortium), first released in 1999. It uses XML syntax to describe graphics, which means:

      • Text-based: SVG files are plain text, viewable and editable with any text editor
      • Searchable: Text content in SVG can be indexed by search engines
      • Scriptable: SVG elements can be dynamically manipulated using JavaScript
      • Styleable: CSS can be used to style SVG elements

      Advantages of SVG

      1. Infinite Scalability

      Vector graphics are based on mathematical formulas to describe shapes, not pixels, so they can be scaled to any size while remaining crisp:

      <!-- This circle remains crisp no matter how much it's scaled -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

      2. Small File Size

      For simple graphics and icons, SVG files are typically much smaller than equivalent quality raster images.

      3. Responsive Design Friendly

      SVG can automatically scale based on container size, making it perfect for responsive web design:

      <svg viewBox="0 0 100 100" width="100%">
  <rect x="10" y="10" width="80" height="80" fill="green" />
</svg>

      4. Accessibility

      SVG supports adding titles and descriptions, improving web page accessibility:

      <svg>
  <title>Company Logo</title>
  <desc>A blue circle representing our company logo</desc>
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

      5. Animation Support

      SVG natively supports animation, enabling smooth vector animations:

      <svg width="100" height="100">
  <circle cx="50" cy="50" r="20" fill="red">
    <animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

      SVG vs Raster Formats

      FeatureSVGPNG/JPEG
      Image TypeVectorRaster
      Scaling QualityLosslessDegrades
      File SizeDepends on complexityDepends on resolution
      EditingText editorImage editing software
      Use CasesIcons, logos, chartsPhotos, complex images
      Browser SupportAll modern browsersAll browsers
      SEO FriendlyYesNo

      SVG Basic Syntax

      SVG uses XML syntax. A basic SVG document structure looks like this:

      <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     width="200" 
     height="200"
     viewBox="0 0 200 200">
  <!-- Add graphic elements here -->
  <rect x="10" y="10" width="180" height="180" fill="#f0f0f0" />
  <circle cx="100" cy="100" r="50" fill="blue" />
</svg>

      Common Attributes

      • width / height: Define the SVG canvas width and height
      • viewBox: Define the coordinate system and visible area
      • xmlns: Declare the SVG namespace

      SVG Use Cases

      1. Website Icons and Logos

      SVG is ideal for website icons as they remain crisp on any screen resolution.

      2. Charts and Data Visualization

      SVG is the foundation for creating interactive charts. Many popular charting libraries (like D3.js) use SVG.

      3. Animations and Interactive Effects

      SVG animations can create engaging user interface effects.

      4. Maps

      SVG is perfect for creating scalable, interactive maps.

      5. Icon Font Alternative

      SVG icons are more flexible than icon fonts, supporting multiple colors and animations.

      Browser Support

      Modern browsers (Chrome, Firefox, Safari, Edge) fully support SVG. IE9+ also provides basic support.

      Using SVG in Web Pages

      SVG can be embedded in web pages in several ways:

      1. Inline SVG

      <body>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="blue" />
  </svg>
</body>

      2. Using img Tag

      <img src="image.svg" alt="SVG Image" />

      3. Using CSS Background

      .icon {
  background-image: url('icon.svg');
  background-size: contain;
}

      4. Using object Tag

      <object type="image/svg+xml" data="image.svg">
  Your browser does not support SVG
</object>

      Tips for Learning SVG

      1. Start with basic shapes: Learn rectangles, circles, lines and other basic shapes first
      2. Understand the coordinate system: Master viewBox and coordinate transformations
      3. Learn path commands: The path element is SVG's most powerful tool
      4. Practice animations: Try CSS and SMIL animations
      5. Combine with JavaScript: Learn how to manipulate SVG with scripts

      Next Steps

      Ready to start learning SVG? Continue reading: