Resize SVG OnlineChange SVG Size, Scale & ViewBox

Control SVG size using CSS properties for responsive designs:

/* Method 1: Width & Height */
svg {
  width: 200px;
  height: 200px;
}

/* Method 2: Responsive */
svg {
  width: 100%;
  height: auto;
}

/* Method 3: Max dimensions */
svg {
  max-width: 500px;
  max-height: 500px;
}

CSS resizing maintains SVG quality and allows responsive scaling for mobile devices.

Set SVG dimensions directly in HTML markup:

<!-- Method 1: img tag -->
<img src="icon.svg"
     width="64"
     height="64"
     alt="Icon" />

<!-- Method 2: Inline SVG -->
<svg width="100"
     height="100"
     viewBox="0 0 24 24">
  <!-- paths here -->
</svg>

<!-- Method 3: Object tag -->
<object data="logo.svg"
        width="200"
        height="100"></object>

HTML attributes provide direct control over SVG display size.

ViewBox controls the coordinate system and aspect ratio:

<!-- ViewBox syntax -->
<svg viewBox="min-x min-y width height">

<!-- Example: Original 100×100 -->
<svg viewBox="0 0 100 100"
     width="50" height="50">
  <!-- Renders at 50×50 but
       maintains internal coords -->
</svg>

<!-- Crop/zoom with viewBox -->
<svg viewBox="25 25 50 50"
     width="200" height="200">
  <!-- Shows center portion
       zoomed in -->
</svg>

ViewBox enables scaling, cropping, and precise control without quality loss.

Programmatically resize SVG using JavaScript or React:

// JavaScript - Dynamic resize
const svg = document.querySelector('svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '300');

// React component
function ResizableSVG({ size }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
    >
      <path d="..." />
    </svg>
  );
}

// Usage: <ResizableSVG size={64} />

Code-based resizing enables dynamic, responsive SVG components.