SVG のパーツコードジェネレータ

SVG要素背景色( SVG Element Color )   ビューボックス背景色( viewBox Color )
表示サイズ( viewPort )   ビューポート縦横比( viewPort Aspect ratio )  : 
ビューボックス( viewBox ) 基点( 左上 )            ビューボックス縦横比( viewBox Aspect ratio )  : 
スケーリング( preserveAspectRatio )
グリッド( Grid )      基準線( Guide )   
  • 挿入前のパーツを非表示( Hide parts before insertion )
  • テキスト( Text )
  • 円形( Circle )
  • 楕円形( Ellipse )
  • 矩形( Rectangle )
  • 直線( Line )
  • 折線( Polyline )

  • 円弧 1( Arc 1 )
  • 円弧 2( Arc 2 )
  • 二次ベジェ曲線( Quadratic Bézier curve )
  • 三次ベジェ曲線( Cubic Bézier curve )
  • 直線パス( Straight line )
  • パス( Path )
  • 画像( Image )
固有設定
挿入位置( Insert Point )      文字サイズ( font-size )
テキスト( Text )
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
挿入位置( Insert Point )      半径( r )
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
挿入位置( Insert Point )      半径   
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
挿入位置( Insert Point )      ( Width ) 高さ( Height )
角丸半径( Rounded corners )   
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
始点( Start Point )    終点( End Point )   
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
マーカー
始点( marker-start )   中間点( marker-mid )   終点( marker-end )  
固有設定
A   y    B   y    C   y    D   y 
E   y    F   y    G   y    H   y 
I   y    J   y    K   y    L   y 
M   y    N   y    O   y    P   y 
Q   y    R   y    S   y    T   y 
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
マーカー
始点( marker-start )   中間点( marker-mid )   終点( marker-end )  
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
円の中心座標( Center coordinates of Circle )      円の半径( Radius of Circle )
開始角( Start angle ) ( Start coordinates  x:   y:  )   内角( Interior angle ) ( End coordinates  x:   y:  )
二点を境に反転描画( Reverse with two points )   パスを閉じる( Close path )
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
マーカー
始点( marker-start )   中間点( marker-mid )   終点( marker-end )  
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
始点( Start Point )      ( Distance ≈  )   終点( End Point )   
円の半径( Radius of Circle ) ( Distance / 2 ≈ ) <=    採用弧( large-arc-sweep-flag )
パスを閉じる( Close path )
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
マーカー
始点( marker-start )   中間点( marker-mid )   終点( marker-end )  
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
始点( Start Point )   
終点( End Point )      制御点( Control Point )   
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
マーカー
始点( marker-start )   中間点( marker-mid )   終点( marker-end )  
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
始点( Start Point )      終点( End Point )   
制御点 1( Control Point 1 )      制御点 2( Control Point 2 )   
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
マーカー
始点( marker-start )   中間点( marker-mid )   終点( marker-end )  
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
始点( Start Point )      終点( End Point )   
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
マーカー
始点( marker-start )   中間点( marker-mid )   終点( marker-end )  
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
パス文字列( Path Strings )
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
ストローク
( stroke-width )   不透明度( stroke-opacity )
( stroke ) 指定色( Specify Color ) 引用( funciri )
端末処理( stroke-linecap )   角の処理( stroke-linejoin ) 留め継ぎ限界( stroke-miterlimit )
破線( stroke-dasharray ) 破線開始位置( stroke-dashoffset )   変形関数影響回避( vector-effect="non-scaling-stroke" )
マーカー
始点( marker-start )   中間点( marker-mid )   終点( marker-end )  
塗り
( fill ) 指定色( Specify Color ) 引用( funciri )
不透明度( fill-opacity )   内側の解釈( fill-rule )
固有設定
画像ファイル( Image file )   画像のタイトル( Image Title )
挿入位置( Insert Point )      ( Width ) 高さ( Height )
スケーリング( preserveAspectRatio )
識別子
ID属性値( id )   Class属性値( class )
変形
移動( translate )      拡大・縮小・反転( scale )      X方向剪断効果( skewX )
回転( rotate ) 回転基準点( Rotate Reference Point )      Y方向剪断効果( skewY )
<svg 
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="1000" height="300"
  viewBox="0 0 1000 300"
  preserveAspectRatio="xMinYMin meet" >


        

</svg>

 

HTML埋め込み用の、SVGのパーツのコードを生成するジェネレータです。

推奨ブラウザは、Google Chrome です。

あらかじめ、テスト表示用のパーツが埋め込まれています。
必要に応じて SVG要素内にコピペしてください。

<polygon>は、<polyline>で用が足りるため、除外しています。

色は、Webカラー(red,green など)と、16進数カラーコード(#774411 など)と、RGBカラーモデル(rgb(255,180,100) など)と、RGBAカラーモデル(rgba(255,180,100,0.4) など)で指定してください。

フォントは、なるべく文字化けを防ぐため、
GoogleWebFont「Noto Sans JP」を使用しています。

このフォントを使用される場合は、CSSに以下を記述してください。

\\\٩( 'ω' )و ////