SVGコード広場

ブログ内で使用しているＳＶＧのコード集です。

適当なImageコントロールに貼り付けてお使いください。

viewboxをはじめ、細かいサイズは調整してください。

"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'>      
       <text x='94' y='18' text-anchor='end' letter-spacing='1'>"&ThisItem.B*ThisItem.C&"</text>
       <text x='"&79.5-Len(ThisItem.B*ThisItem.C)*11&"' y='18'>￥</text>
    </svg>"
)
"data:image/svg+xml,"
&EncodeUrl("
<svg viewBox='0 0 550 500' xmlns='http://www.w3.org/2000/svg'> 
    <line x1='0' y1='"&CountRows(Gallery02.AllItems)*100&"' x2='550' y2='500' stroke='#666666'/>
</svg>")
オリジナルアイコン


"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>      
       <path d='M 7,45
        A 25,24 0 1,1 50,20 
        a 25,24 0 0,1 43,25
        l 0,0 -43,45 z
        ' fill='RGBA(250, 155, 112, 1)'/>
    </svg>"
)



EncodeUrl(    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>              <path id='path1' d='M 10,50        A 10,10 0 1,1 90,50         ' fill='none' stroke='REd' stroke-width='15' stroke-dasharray='4 4'/>     </svg>""data:image/svg+xml,"& 
"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>      
        <path id='path1' d='M 10,50
        A 10,10 0 1,1 90,50 
        ' fill='none' stroke='REd' stroke-width='15' stroke-dasharray='4 4'/>

    </svg>"
)


//〇
"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>      
        <circle cx='50' cy='50' r='35' fill='none' stroke='RGBA(96,96,96,1)' stroke-width='5'/>
    </svg>"
)

//△
"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>      
        <path d='M50,20 L15,80 L85,80 z' fill='none' stroke='RGBA(96,96,96,1)' stroke-width='5'/>
    </svg>"
)

//×
"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>      
        <line x1='20' y1='20' x2='80' y2='80' stroke='RGBA(96,96,96,1)' stroke-width='5'/>
        <line x1='80' y1='20' x2='20' y2='80' stroke='RGBA(96,96,96,1)' stroke-width='5'/>
    </svg>"
)


//上向き　青
"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <polygon points='50,0 0,50 30,50 30,100 70,100 70,50 100,50' fill='"&"RGBA(39, 113, 194, 1)"&"'/>
    </svg>"
)
//下向き　赤
"data:image/svg+xml,"& 
EncodeUrl(
    "<svg viewBox='0 0 "& Self.Width & " " & Self.Height & "' xmlns='http://www.w3.org/2000/svg'>
        <polygon points='50,100 0,50 30,50 30,0 70,0 70,50 100,50' fill='"&"RGBA(255, 0, 0, 1)"&"'/>
    </svg>"
)