レスポンシブSVGデザイン：すべてのデバイスでグラフィックをスケーリング

<svg viewBox="0 0 100 100">
  <!-- コンテンツ -->
</svg>

<!-- 固定サイズ -->
<svg width="200" height="200" viewBox="0 0 100 100">

<!-- レスポンシブ（寸法なし） -->
<svg viewBox="0 0 100 100">

<!-- パーセントベース -->
<svg width="100%" viewBox="0 0 100 100">

<!-- デフォルト：中央揃えでフィット -->
preserveAspectRatio="xMidYMid meet"

<!-- コンテナを塗りつぶし（クロップ可能性あり） -->
preserveAspectRatio="xMidYMid slice"

<!-- 保持なし（ストレッチ） -->
preserveAspectRatio="none"

svg {
  width: 100%;
  height: auto;
}

.svg-container {
  width: 50vw;
  max-width: 500px;
}

.svg-container svg {
  width: 100%;
  height: auto;
}

.svg-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.svg-wrapper svg {
  width: 100%;
  height: 100%;
}

.hero-icon {
  width: clamp(40px, 10vw, 120px);
  height: auto;
}

.hero {
  background-image: url('pattern.svg');
  background-size: cover;
  background-position: center;
}

<div class="logo-container">
  <svg viewBox="0 0 200 50" class="responsive-logo">
    <!-- ロゴコンテンツ -->
  </svg>
</div>

<style>
.responsive-logo {
  width: 100%;
  max-width: 200px;
  height: auto;
}
</style>

<svg viewBox="0 0 100 100">
  <style>
    .detail { display: block; }

    @media (max-width: 400px) {
      .detail { display: none; }
    }
  </style>

  <circle class="main" cx="50" cy="50" r="40"/>
  <circle class="detail" cx="50" cy="50" r="10"/>
</svg>

<picture>
  <source srcset="logo-wide.svg" media="(min-width: 800px)">
  <source srcset="logo-compact.svg" media="(min-width: 400px)">
  <img src="logo-icon.svg" alt="会社のロゴ">
</picture>

function updateSVG() {
  const svg = document.querySelector('.adaptive-svg');
  const details = svg.querySelectorAll('.detail');

  if (window.innerWidth < 600) {
    details.forEach(el => el.style.display = 'none');
  } else {
    details.forEach(el => el.style.display = 'block');
  }
}

window.addEventListener('resize', updateSVG);

:root {
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
}

.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); }

svg {
  vector-effect: non-scaling-stroke;
}

/* またはSVG内で */
<path vector-effect="non-scaling-stroke" d="..."/>

svg {
  overflow: hidden;
}

.icon {
  min-width: 16px;
  min-height: 16px;
}

.logo {
  width: 100%;
  max-width: 300px;
}

<!-- クリティカルなSVGはインライン -->
<svg class="logo">...</svg>

<!-- 装飾的なものは遅延読み込み -->
<img src="decoration.svg" loading="lazy">