FILEImages & Filesnew suite

SVG Optimizer, Sanitizer & React JSX Exporter

Clean SVG markup, strip editor junk, convert SVG to React/Next.js JSX component, and generate data URI with live transparent/dark preview.

tool id:svg-optimizer
svg viewer & optimizer
Presets:
279 bytes-1% (4 bytes saved)
Visual Rendering
100%
viewBox: 0 0 24 24Size: 64 × 64Shapes: 2 elements
React / Next.js Component
Component Name:
import React from "react";

export function TerminalIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#e05244" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <polyline points="4 17 10 11 4 5"></polyline> <line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
  );
}

export default TerminalIcon;
Optimized Raw SVG
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#e05244" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="4 17 10 11 4 5"></polyline> <line x1="12" y1="19" x2="20" y2="19"></line>
</svg>

related tools in Images & Files

view all Images & Files→

Client-Side Image Compressor & Resizer

Compress, resize, and convert images (WebP, PNG, JPEG) completely in your browser via Canvas API.

Open Tool→

Image ↔ Base64 Data URI

Convert images to Base64 data strings for inline HTML/CSS, or preview and download Base64 as images.

Open Tool→

SVG Viewer, Cleaner & Data URI

Inspect SVG code with live preview, optimize tags, and copy as ready-to-use Data URI or JSX.

Open Tool→