svgイメージをボタンとして使用しますが、直接HTMLには含めません

Question

私はいくつかのボタンイメージをsvgとして保存しています。私は今、これらの画像を自分のhtmlサイトのボタンとして使いたいと思っています。しかし、私はこれをどのように達成するか考えていません。

イメージは非常に複雑なので、実際のHTMLファイルの中に入れたくないのですが、それらを別のファイルからインポートすることは望ましくありません（別に.svgファイルとして保存することをお勧めします）。 2番目の問題（私はそれが問題であるかどうかわからない）は、ボタンが丸いということです。

私はボタンをバックグラウンドイメージとしてCSSに入れるか、または私がonclickメソッドを与えると思っている標準イメージと同じように考えましたが、最後の方法はあまりにも複雑すぎて、私には非常に直観的ではない。私はこれを書いて、これについて考えていることを示しているが、わからない。ここで

は、私がこれまでに作ってみたものです：

<div class="sw-buttons"> 
       <button id="sw-button-1" /> 
       </button> 

       <button id="sw-button-2" /> 
       </button> 
       ...(more buttons here) 
      </div> 

私はthisを発見したが、ここではSVGをまっすぐHTMLに含まれています。

Answer 1

あなたは<button>...</button>要素内<img />のsrcとして外部SVGを含めることができます。

button, button img { 
 
width: 100px; 
 
height: 100px; 
 
border-radius: 100px; 
 
} 
 

 
button { 
 
position: relative; 
 
background-color: rgb(255,255,255); 
 
} 
 

 
button img { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
background-color: rgb(0,0,0); 
 
}

<button type="button"> 
 
<img src="/my-svg-button.svg" /> 
 
</button>

Answer 2

あなたは、サーバー上に格納し、コードを使用してそれらにアクセスすることができます

#sw-button-1: 
    background: url(put_the_link_to_your_image_here) no-repeat left top; 
    height: auto; 
    width: auto; 

    #sw-button-2: 
    background: url(put_the_link_to_your_image_here) no-repeat left top; 
    height: auto; 
    width: auto; 

ボタンの高さと幅を調整することができます。