Kenhuang Academy
  • English

      • SVG Embedded in HTML

      There are various ways to use SVG in web pages. This chapter will introduce different embedding methods and their pros and cons.

      Method 1: Inline SVG

      The most direct way is to write SVG code directly in HTML:

      <!DOCTYPE html>
<html>
<body>

<svg width="200" height="100">
  <rect width="200" height="100" fill="#3b82f6" />
  <text x="100" y="55" text-anchor="middle" fill="white" font-size="20">
    Hello SVG
  </text>
</svg>

</body>
</html>

      Pros

      • Can style with CSS
      • Can manipulate elements with JavaScript
      • No additional HTTP requests
      • Supports all SVG features

      Cons

      • HTML file size increases
      • Cannot be cached by browser
      • Code can become cluttered

      Method 2: Using <img> Tag

      Import SVG as an image file:

      <img src="image.svg" alt="SVG Image" width="200" height="100">

      Pros

      • Simple syntax, same as regular images
      • Can be cached by browser
      • Keeps HTML clean

      Cons

      • Cannot modify SVG internal styles with CSS
      • Cannot manipulate SVG elements with JavaScript
      • Does not support scripts in SVG animations

      Method 3: Using CSS Background Image

      Use SVG as CSS background:

      .icon {
  width: 100px;
  height: 100px;
  background-image: url('icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
      <div class="icon"></div>

      Pros

      • Easy to control size and position with CSS
      • Can be cached by browser
      • Suitable for decorative graphics

      Cons

      • Cannot manipulate SVG internal elements
      • Not suitable for interactive graphics

      Method 4: Using <object> Tag

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

      Pros

      • Can be cached by browser
      • Supports fallback content
      • Scripts inside SVG can run

      Cons

      • Cross-domain access restricted
      • Style isolation, external CSS cannot affect internal styles

      Method 5: Using <iframe> Tag

      <iframe src="image.svg" width="200" height="100" frameborder="0">
  Your browser does not support iframe
</iframe>

      Pros

      • Completely isolated environment
      • Scripts inside SVG can run

      Cons

      • Styles completely isolated
      • Cross-domain operations restricted
      • Increases page complexity

      Method 6: Using Data URI

      Encode SVG as Base64 or embed directly:

      <!-- Base64 encoded -->
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIi..." alt="SVG">

<!-- URL encoded -->
<img src="data:image/svg+xml,%3Csvg%20width%3D%22100%22..." alt="SVG">

      Pros

      • Reduces HTTP requests
      • Suitable for small icons

      Cons

      • Not readable, difficult to maintain
      • Base64 increases file size by about 33%
      • Cannot be cached separately

      Best Practice Selection

      Use CaseRecommended Method
      Need JS interactionInline SVG
      Need CSS animationInline SVG
      Static decorative image<img> or CSS background
      Icon systemInline SVG + Symbol
      External SVG needs scripts<object>

      SVG Symbol Usage

      For icon systems, Symbol is recommended:

      <!-- Define Symbol (usually placed at the top of the page) -->
<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
  </symbol>
</svg>

<!-- Use Symbol -->
<svg width="24" height="24">
  <use href="#icon-home"></use>
</svg>

<svg width="24" height="24">
  <use href="#icon-user"></use>
</svg>

      viewBox Attribute

      viewBox is one of the most important SVG attributes, defining the SVG coordinate system:

      <svg width="200" height="100" viewBox="0 0 100 50">
  <rect width="100" height="50" fill="#3b82f6"/>
</svg>

      viewBox="0 0 100 50" means:

      • 0 0: Starting point coordinates (x, y)
      • 100 50: Viewport width and height

      This allows SVG to scale responsively.

      Responsive SVG

      Create responsive SVG:

      <svg viewBox="0 0 100 100" style="width: 100%; max-width: 300px;">
  <circle cx="50" cy="50" r="40" fill="#3b82f6"/>
</svg>

      Key points:

      • Set viewBox instead of fixed width/height
      • Use CSS to control actual dimensions

      Next Steps

      Now you understand how to use SVG in HTML, let's learn how to draw SVG Rectangle!