Utilizing SVG images as interactive elements without embedding them directly into the HTML code

Question

Utilizing SVG images as interactive elements without embedding them directly into the HTML code

I am facing a challenge with incorporating button images saved as svgs into my HTML site. These images are intricate, so I prefer to have them stored separately as .svg files rather than directly within the HTML file. Additionally, the buttons are circular in shape.

My initial thoughts were to add the buttons as background images in CSS or inserting them as standard images with an onclick method. However, both methods seem overly complex and counterintuitive. My uncertainty on the best approach led me here seeking advice.

Here is a snippet of what I have attempted so far:

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

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

While researching, I came across this resource, but it includes the svg images directly in the HTML which is not ideal for my case.

javascript jquery html css svg

Answer 1

Answer №1

To incorporate an external SVG into a button, you can use the src attribute within an <img /> tag nested inside a <button>...</button> element:

button, button img {
width: 80px;
height: 80px;
border-radius: 50%;
}

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

button img {
position: relative;
top: 10px;
left: 10px;
}

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

Answer 2

To incorporate an external SVG into a button, you can use the src attribute within an <img /> tag nested inside a <button>...</button> element:

button, button img {
width: 80px;
height: 80px;
border-radius: 50%;
}

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

button img {
position: relative;
top: 10px;
left: 10px;
}

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

Answer 3

Answer №2

To access custom buttons on your website, you can store them on your server and use the following code snippet:

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

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

You have the flexibility to adjust the size of the buttons as needed.

Answer 4

To access custom buttons on your website, you can store them on your server and use the following code snippet:

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

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

You have the flexibility to adjust the size of the buttons as needed.

Utilizing SVG images as interactive elements without embedding them directly into the HTML code

Answer №1

Answer №2

Similar questions

Is it necessary for an Angular 2 '@Component' decorator to have an element name selector?

What techniques can I use to modify an object while it's being iterated through?

Netlify encountered an error with mixed content, indicating that the page was successfully loaded over HTTPS, but it attempted to request an insecure HTTP

Implementing lazy loading functionality with jQuery for an image grid within an AngularJS single page application

When I use AJAX to load a PHP file, the function's content returns as [object HTMLDivElement]

AngularJS HTML template language is a powerful tool for creating dynamic web

Incorporating the angular UI router effectively by reusing the same templateUrl and controller multiple times

Is there a quicker method to update the state of an array of objects?

An issue with importing chatgpt: ES Module require() not functioning as expected

What is the best way to transfer functions connected to an Object over to Object.prototype?

What is the most straightforward method to access these four buttons?

Struggling to align the login button accurately within the navbar

Is there a way to initiate an Edge animation when an onclick event occurs?

Converting data from an HTML file to JSON with the help of <input file> feature in Javascript (Vue)

A scenario in a Jasmine test where a function is invoked within an if statement

Tips for creating a sequence pattern in JavaScript or jQuery resembling 12345-1234567-8

What causes inline CSS and internal CSS to exhibit different behaviors?

alignment problems in dropdown menus

Is there a way to have the even numbers in an array printed before the odd numbers?

Initiating a conversation from deep within a conversation using JQuery Mobile