How to use SVG in responsive design

SVG has unique advantages and applications in responsive design, allowing for the creation of graphics that adapt to various screen sizes:

1. Using viewBox for Responsiveness viewBox is the core of SVG responsive design, defining the internal coordinate system.

svg
<svg viewBox="0 0 100 100" width="100%" height="auto">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Key Points:

• viewBox defines the internal coordinate system
• width/height use percentages or auto
• SVG automatically scales based on the container

2. preserveAspectRatio Controls Scaling Behavior Controls how SVG adapts to the container.

svg
<!-- Maintain aspect ratio, display completely -->
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" 
     width="100%" height="100%">

<!-- Maintain aspect ratio, fill container -->
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" 
     width="100%" height="100%">

<!-- Stretch to fill -->
<svg viewBox="0 0 100 100" preserveAspectRatio="none" 
     width="100%" height="100%">

3. Responsive Icon System Create a scalable icon system.

svg
<!-- Icon definitions -->
<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
  </symbol>
</svg>

<!-- Use icons, automatically adapt to container -->
<svg class="icon" width="24" height="24">
  <use href="#icon-home"/>
</svg>

<svg class="icon" width="48" height="48">
  <use href="#icon-search"/>
</svg>

CSS Styles:

css
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Different sized icons */
.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 48px;
  height: 48px;
}

4. Responsive Charts Create charts that adapt to the screen.

svg
<svg viewBox="0 0 400 200" width="100%" height="auto" preserveAspectRatio="xMidYMid meet">
  <!-- Bar chart -->
  <rect x="20" y="80" width="40" height="100" fill="blue" />
  <rect x="80" y="50" width="40" height="130" fill="green" />
  <rect x="140" y="30" width="40" height="150" fill="red" />
  <rect x="200" y="60" width="40" height="120" fill="yellow" />
  
  <!-- Axes -->
  <line x1="10" y1="190" x2="390" y2="190" stroke="black" stroke-width="2"/>
  <line x1="10" y1="10" x2="10" y2="190" stroke="black" stroke-width="2"/>
</svg>

5. Media Queries with SVG Use CSS media queries to adjust SVG display.

css
/* Small screens */
@media (max-width: 768px) {
  .responsive-svg {
    width: 100%;
    height: auto;
  }
}

/* Large screens */
@media (min-width: 769px) {
  .responsive-svg {
    width: 50%;
    height: auto;
  }
}

6. Responsive Background SVG Use SVG as a responsive background.

css
.hero-section {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%233498db"/></svg>');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

7. JavaScript Dynamic Adjustment Use JavaScript to dynamically adjust SVG based on container.

javascript
function resizeSVG() {
  const container = document.querySelector('.svg-container');
  const svg = container.querySelector('svg');
  
  const containerWidth = container.offsetWidth;
  const containerHeight = container.offsetHeight;
  
  svg.setAttribute('width', containerWidth);
  svg.setAttribute('height', containerHeight);
}

window.addEventListener('resize', resizeSVG);
resizeSVG(); // Initialize

Best Practices:

• Always use viewBox
• Reasonably use preserveAspectRatio
• Consider mobile performance
• Use CSS to control dimensions
• Test various screen sizes
• Optimize SVG file size