SVG Editor Tool

SVGコードエディター

<rect x="0" y="0" width="800" height="400" fill="#000000" />

<text
    x="400"
    y="70"
    text-anchor="middle"
    fill="#D4AF37"
    font-family="sans-serif"
    font-size="36"
    font-weight="bold"
  >
    SVGとは
  </text>

<text
    x="400"
    y="110"
    text-anchor="middle"
    fill="#D4AF37"
    font-family="sans-serif"
    font-size="16"
  >
    (Scalable Vector Graphics)
  </text>

<text
    x="100"
    y="160"
    fill="#D4AF37"
    font-family="sans-serif"
    font-size="16"
  >
    <tspan x="100" dy="0">• ベクター形式の画像ファイル</tspan>
    <tspan x="100" dy="24">• 拡大・縮小しても画質劣化がない</tspan>
    <tspan x="100" dy="24">• テキストや図形をXMLで表現</tspan>
    <tspan x="100" dy="24">• 直接コードを編集しやすい</tspan>
  </text>

<path
    d="M650 160 L650 240 L680 200 Z"
    fill="#D4AF37"
  />
  <path
    d="M700 160 L700 240 L730 200 Z"
    fill="url(#gold_gradient)"
  />
  <defs>
    <linearGradient
      id="gold_gradient"
      x1="700"
      y1="160"
      x2="700"
      y2="240"
      gradientUnits="userSpaceOnUse"
    >
      <stop offset="0.02" stop-color="#FFD700" />
      <stop offset="0.08" stop-color="#FFC107" />
      <stop offset="0.16" stop-color="#FFB300" />
      <stop offset="0.42" stop-color="#FFD700" />
      <stop offset="0.68" stop-color="#FFC107" />
      <stop offset="0.9" stop-color="#FFB300" />
    </linearGradient>
  </defs>

<text
    x="790"
    y="390"
    text-anchor="end"
    fill="#D4AF37"
    font-family="sans-serif"
    font-size="12"
    font-style="italic"
  >
    © yoki-ai-demo
  </text>
</svg>

プレビュー

使い方

変換したいSVGコードを入力フィールドに入力してください
リアルタイムプレビューを確認しながらコードを編集できます
PNG、SVG形式でダウンロードできます