SVG → CSS変換

SVGをCSS background-image/clip-path/mask-imageに変換。プレビュー付き

モード:

background-imageclip-pathmask-image

|サンプル:

size:

repeat:

position:

プレビュー

SVG入力

CSS出力

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E %3Cpolygon points='50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35' fill='%23f59e0b'/%3E %3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;