I have a few button images, saved as svgs. I now want to use these images as buttons on my html site. However, I have no idea how to acplish this.

The images are quite plex, so I do not want them to be inside the actual HTML file, but import them from a separate file (I just mean, I want them to be saved as .svg files separately).The second problem (of which I do not know whether it is a problem or not) is that the buttons are round.

I have thought of solving this by including the buttons as background images in css, or just as standard images which I think give an onclick method, but surely the last method is way too plicated, and making them background images also seems very counter-intuitive to me. I'm just writing this to show that I have thought about this, but do not know.

Here is what I've e up with so far:

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

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

I have found this, but here the svg is included straight in the HTML.

I have a few button images, saved as svgs. I now want to use these images as buttons on my html site. However, I have no idea how to acplish this.

The images are quite plex, so I do not want them to be inside the actual HTML file, but import them from a separate file (I just mean, I want them to be saved as .svg files separately).The second problem (of which I do not know whether it is a problem or not) is that the buttons are round.

I have thought of solving this by including the buttons as background images in css, or just as standard images which I think give an onclick method, but surely the last method is way too plicated, and making them background images also seems very counter-intuitive to me. I'm just writing this to show that I have thought about this, but do not know.

Here is what I've e up with so far:

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

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

I have found this, but here the svg is included straight in the HTML.

• javascript
• jquery
• html
• css
• svg

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Dec 6, 2016 at 22:55 George WelderGeorge Welder 4,0551111 gold badges4545 silver badges7575 bronze badges 4

• Why don't you just set them as background-image on the <button> elements? – junkfoodjunkie Commented Dec 6, 2016 at 23:02
• Use an external SVG file - see this article – Ori Drori Commented Dec 6, 2016 at 23:03
• is setting them as css background images fine? I would have thought it's bad practice. – George Welder Commented Dec 6, 2016 at 23:04
• This article from CSS Tricks explains the various ways to include SVG files on a webpage. – gyre Commented Dec 6, 2016 at 23:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can include your external svg as the src of an <img /> inside a <button>...</button> element:

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>

You can store them on your server and access them using the code:

    #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;

You can adjust the height and width of the buttons accordingly.