The Developer's Complete Guide to SVG Vector Math, Path Commands & Clean Web Graphics

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" fill="#3b82f6" stroke="#1d4ed8" stroke-width="2"/>
</svg>

<svg width="100%" height="400px" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
  <!-- All internal paths are drawn relative to a 1920x1080 virtual coordinate space -->
</svg>

<!-- Full cover background illustration without aspect distortion -->
<svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" class="w-full h-full">
  <path d="M0,0 L1440,0 L1440,900 L0,900 Z" fill="#070a12" />
</svg>

<svg viewBox="0 0 100 100" class="w-32 h-32">
  <path d="M 50,5 
           L 90,27.5 
           L 90,72.5 
           L 50,95 
           L 10,72.5 
           L 10,27.5 
           Z" 
        fill="rgba(59, 130, 246, 0.15)" 
        stroke="#3b82f6" 
        stroke-width="2" />
</svg>

C x1,y1 x2,y2 x,y

C x1,y1 x2,y2 x,y  S x2_new,y2_new x_new,y_new

flowchart LR
    A["Raw Bitmap (PNG/JPG)"] --> B["Color Quantization & Luminance Thresholding"]
    B --> C["Marching Squares Contour Extraction"]
    C --> D["Polygonal Approximation & Douglas-Peucker"]
    D --> E["Bézier Spline Fitting (Least Squares Curve Fit)"]
    E --> F["Optimized Clean SVG Path Document"]

<!-- UNOPTIMIZED: 4.2 KB Raw Illustrator Export -->
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
  <defs>
    <style type="text/css">.st0{fill:#3B82F6;}</style>
  </defs>
  <g id="Group_x5F_Container">
    <g id="Sub_x5F_Group_1">
      <path class="st0" d="M124.3829102,45.8920193 C124.3829102,45.8920193 189.2819201,89.1928301 
                           250.0000000,89.1928301 C310.7180799,89.1928301 375.6170898,45.8920193 
                           375.6170898,45.8920193 L375.6170898,280.4910291..."/>
    </g>
  </g>
</svg>

<!-- OPTIMIZED: 320 Bytes Production SVG -->
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <path fill="#3b82f6" d="M124.4 45.9c0 0 64.9 43.3 125.6 43.3s125.6-43.3 125.6-43.3v234.6..."/>
</svg>

// svgo.config.js
module.exports = {
  multipass: true, // Run optimization passes repeatedly until minimal size is achieved
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergeStyles',
    'inlineStyles',
    'minifyStyles',
    {
      name: 'cleanupNumericValues',
      params: {
        floatPrecision: 2, // Maximum 2 decimal points
        leadingZero: false // Trims 0.5 to .5
      }
    },
    {
      name: 'convertPathData',
      params: {
        applyTransforms: true,
        straightCurves: true,
        lineShorthands: true,
        curveSmoothShorthands: true,
        floatPrecision: 2
      }
    },
    'removeEmptyContainers',
    'removeUnusedNS',
    'sortAttrs'
  ]
};

export async function extractImageDataFromFile(file: File): Promise<ImageData> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const objectUrl = URL.createObjectURL(file);

    img.onload = () => {
      URL.revokeObjectURL(objectUrl);
      
      // Instantiate an OffscreenCanvas for maximum rendering performance
      const canvas = document.createElement("canvas");
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      const ctx = canvas.getContext("2d", { willReadFrequently: true });
      if (!ctx) {
        reject(new Error("Unable to obtain 2D rendering context"));
        return;
      }

      // Draw the raster bitmap into the canvas memory buffer
      ctx.drawImage(img, 0, 0);

      // Extract raw Uint8ClampedArray: [R, G, B, A, R, G, B, A, ...]
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      resolve(imageData);
    };

    img.onerror = () => reject(new Error("Failed to decode raster image file"));
    img.src = objectUrl;
  });
}

// Binary thresholding for black-and-white vector tracing
export function thresholdBitmap(imageData: ImageData, threshold: number = 128): Uint8Array {
  const { width, height, data } = imageData;
  const binaryMap = new Uint8Array(width * height);

  for (let i = 0; i < width * height; i++) {
    const r = data[i * 4];
    const g = data[i * 4 + 1];
    const b = data[i * 4 + 2];
    const a = data[i * 4 + 3];

    // If pixel is semi-transparent, treat as background
    if (a < 128) {
      binaryMap[i] = 0;
      continue;
    }

    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    binaryMap[i] = luminance < threshold ? 1 : 0; // 1 = foreground vector path
  }

  return binaryMap;
}

// components/ui/SvgIcon.tsx
import React from "react";

export interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
  className?: string;
  title?: string;
  desc?: string;
}

export const SvgIcon: React.FC<SvgIconProps> = ({
  size = 24,
  className = "",
  title,
  desc,
  children,
  viewBox = "0 0 24 24",
  ...props
}) => {
  const titleId = title ? svg-title-${React.useId()} : undefined;
  const descId = desc ? svg-desc-${React.useId()} : undefined;

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox={viewBox}
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      role={title ? "img" : "presentation"}
      aria-hidden={!title}
      aria-labelledby={[titleId, descId].filter(Boolean).join(" ") || undefined}
      className={inline-block shrink-0 transition-transform duration-200 ${className}}
      {...props}
    >
      {title && <title id={titleId}>{title}</title>}
      {desc && <desc id={descId}>{desc}</desc>}
      {children}
    </svg>
  );
};

<!-- Inherits text-blue-500, turns text-blue-400 on hover -->
<button className="flex items-center gap-2 text-blue-500 hover:text-blue-400">
  <SvgIcon size={20}>
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
  </SvgIcon>
  <span>Launch Tool</span>
</button>

/* styles/vector-animations.css */
@keyframes drawVectorPath {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.animate-vector-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawVectorPath 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}