CDCodDepot
Categories

Β© 2026 CodDepot. All rights reserved.

HomeCategoriesPrivacy PolicyTerms
  1. Home
  2. /
  3. Developer
  4. /
  5. SVG Viewer & Editor
πŸ–ΌοΈ

SVG Viewer & Editor

View, edit, optimize and export SVG files online.

Share𝕏Post on XinLinkedIn
AdSense Placeholder β€” Leaderboard 728Γ—90
Samples

Code

6 lines Β· 379 B
1
2
3
4
5
6
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="48" fill="#fde047" stroke="#a16207" stroke-width="2"/>
  <circle cx="35" cy="40" r="5" fill="#1f2937"/>
  <circle cx="65" cy="40" r="5" fill="#1f2937"/>
  <path d="M30 60 Q50 80 70 60" stroke="#1f2937" stroke-width="4" fill="none" stroke-linecap="round"/>
</svg>

Preview

100%

Info

File

Size
379 B
Minified
366 B (βˆ’3%)
Dimensions
β€”
Animations
No

Elements

β€”

Colors (0)

β€”

Export

Data URI

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDgiIGZpbGw9IiNmZG…

React component (JSX)

export function IconSvg(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
      <circle cx="50" cy="50" r="48" fill="#fde047" stroke="#a16207" strokeWidth="2"/>
      <circle cx="35" cy="40" r="5" fill="#1f2937"/>
      <circle cx="65" cy="40" r="5" fill="#1f2937"/>
      <path d="M30 60 Q50 80 70 60" stroke="#1f2937" strokeWidth="4" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

Was this tool useful?

Your vote is saved on this device only.

AdSense Placeholder β€” Medium Rectangle 300Γ—250

Related tools

🧾

JSON Formatter / Validator

Format, minify, and validate JSON with syntax highlighting.

πŸ”

Base64 Encoder / Decoder

Encode plain text to Base64 or decode it back.

πŸ”—

URL Encoder / Decoder

Percent-encode and decode URL components.

AdSense Placeholder β€” Leaderboard 728Γ—90