What is the best way to add an image to a SVG placeholder?

This is all unfamiliar territory for me. I am experimenting with the Bootstrap template named "Carousel" as my starting point, utilizing Bootstrap 5.3.2.

Here is the link to the Carousel example

Everything seems fine so far. However, I am struggling to locate any resources on how to replace the gray filling in the SVG placeholder with my own rounded image.

Any assistance would be greatly appreciated. My goal is to substitute that gray SVG round placeholder with an actual image.

<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false">
        <title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect>
        <text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>

https://i.sstatic.net/Agv7F.png

htmlcsssvgbootstrap-5

Answer №1

Instead of using Bootstrap, consider implementing it using a native Web Component:

customElements.define("svg-avatar", class extends HTMLElement {
  connectedCallback() {
    let id   = "id" + crypto.randomUUID();
    let href = "https://octodex.github.com/images/" + this.getAttribute("src");
    this.style.display = "inline-block";
    this.innerHTML     = `<svg viewBox="0 0 100 100">
      <defs>
        <pattern id="${id}" patternUnits="objectBoundingBox" height="100%" width="100%">
          <image href="${href}" width="100" height="100" preserveAspectRatio="xMidYMin slice"/>
        </pattern>
      </defs>
      <circle fill="url(#${id})" cx="50" cy="50" r="49" stroke="black"/>`;
  }
});
svg-avatar {
  width: 180px;
  background: rebeccapurple;
}
<svg-avatar src="original.jpg"></svg-avatar>
<svg-avatar src="saint_nictocat.jpg"></svg-avatar>
<svg-avatar src="grinchtocat.gif"></svg-avatar>

Answer №2

SVG files have the ability to use the image tag for inserting images directly into SVG files:

<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg">
 <!-- Inserting an image -->
 <image xlink:href="PATH_TO_YOUR_IMG.png" width="400" height="300" />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the active state of a Dropdown Item in Bootstrap version 4.5

Recently, I've embarked on the journey of creating my own theme using a combination of SASS and Bootstrap. However, I've hit a little snag when it comes to achieving the desired active appearance for a dropdown item within a navbar. To be complet ...

cssbootstrap-4sasskoala

Display a unique and unconventional image as a dynamic full-screen background, ensuring the entire image is visible using React/RedwoodJS

Looking for a somewhat unusual solution here - I want to use an image as a background with all edges of the picture visible at all times. Typically, I would use the "cover" setting for this, but that doesn't achieve what I need (image included). After ...

cssreactjsbackground-imageredwoodjs

I am interested in implementing a feature that automatically saves form data when changes are made. My solution involves creating a dynamic form utilizing

When creating a dynamic form in HTML using Laravel and then calling it through JQuery, I encountered an issue where the first form created showed an undefined form ID, but subsequent forms displayed their form IDs. How can this issue be resolved? Below i ...

htmljquerycssajaxlaravel

Creating a Sudoku puzzle grid with HTML and CSS - a step-by-step guide

Apologies for the basic inquiry, but I have created a sudoku grid with the following structure. Modified(Using Tables): <table id="grid" border="1" style="border-collapse: collapse;"> <tr class="row"> ...

htmlcss

I have a page division with scroll bars and I want to ensure that the entire content of the division is displayed

I am facing an issue with a div and table on my webpage: <div id="tablediv"> <table id="table"> <tr><th>headers</th></tr> <tr><td>contents</td></tr> </table> <d ...

htmlcssbrowserprintingmedia-queries

How to Animate the Deletion of an Angular Component in Motion?

This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...

javascriptcssangulartypescriptangular-animations

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

<nav id="NavbarMaster" class="navbar NavCompression"> <!-- style="min-height:100px;" --> <div id="navToggler" class="container-fluid TitleBG TitleHeight"> <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0; ...

htmlcsstwitter-bootstrap-3responsive-designnav

The chatbot text input feature is malfunctioning and failing to display the entered text in the chatbox

Hi there! I'm in the process of creating a chatbot using a basic input text box and button in HTML, with a php start function. Unfortunately, when I enter text into the textbox, nothing is showing up on the screen and the button doesn't seem to b ...

javascriptphphtml

Removing or hiding elements using jQuery

My HTML code includes a select tag, and when the value changes, I want to retrieve data from the database based on this new value. The data is then displayed in a new div. This new div contains a close sign that should hide the div when clicked by the user ...

jqueryhtml

A visually stunning image showcase with dynamic resizing and strategically placed white spaces using the m

I'm attempting to create a responsive image gallery using the Masonry jQuery plugin, but despite reading numerous articles and forum posts on the topic, I can't seem to get it to work properly. The gallery is displaying many blank spaces. My app ...

javascriptjqueryhtmlcssjquery-masonry

Refreshing Django HTML table dynamically upon database updates

Currently, I have an HTML table set up using a Django template to showcase data from my database. I am looking to ensure that this table remains updated in real-time whenever the database undergoes changes. Despite my research efforts, there is limited inf ...

htmlajaxdjangodatabaseweb-applications

Black textures with images sourced from the same domain - Cross-origin

Despite trying numerous solutions and tips to resolve the cross-origin issue, I still can't seem to fix it. There are no errors, the images are hosted on the same domain as the webgl test, but the textures appear black. Occasionally when I refresh rep ...

javascripthtmlthree.js

Verifying that dynamically generated textboxes contain values

I am facing an issue with my code where I am generating dynamic IDs like checc1, checc2 for dynamically created textboxes. How can I assign these values to a variable called 'boxc' one by one? function GetDynamicTextBox(value) { var nextRowID ...

phpjqueryhtml

How does using position: fixed affect width in React components?

Can someone explain why my sidebar width is reduced when I apply position: fixed? Here is the code snippet: https://codesandbox.io/s/1yr3nlqp74 Steps to reproduce the bug: Open the code in a new window (full screen) Observe the picture before and after ...

reactjscssreact-reduxmaterial-ui

Image broken despite accurate file path in next.js and tailwind

https://i.stack.imgur.com/2ZqPa.png In my components folder, specifically in navbar.js, I have a path to the image folder <img className="block lg:hidden h-8 w-auto" src='../images/logo_injoy.png' alt="Logo" /> U ...

htmlnext.js

How come the inclusion of a DOCTYPE tag impacts the styling of my CSS?

I am puzzled why the code below renders correctly without any issues until I add a doctype declaration: <body style="margin:0; padding:0; background-color:#eeeeee"></body> <div id="HeaderContainer" style="background-color:#eeeeee; color:Bl ...

htmlcss

Display a modal pop-up containing HTML content

I recently started building a small website using Zurb Foundation. I have created a basic grid layout with large metro style div thumbnails (about 10 on the page). Now, I want to enhance user interaction by implementing modal windows that appear when a th ...

javascriptjqueryhtmlcssmodal-dialog

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...

javascriptcsshtml

Can a fully functional website be developed solely using Django REST Framework (DRF) and Bootstrap?

As a fresh back-end developer venturing into creating a basic shopping website, I've got my Django REST Framework API ready to roll. Opting for Bootstrap 5 for the front-end, I'm wondering if these tools suffice for the task at hand or do I requi ...

djangodjango-rest-frameworkfrontendbootstrap-5

Issue with the height of Bootstrap 4 navigation bar

After deciding to use Bootstrap 4 for my current project, I encountered an issue with the navbar. It seems to expand too much, which is only happening once I deploy the website. Can anyone help me figure out what's causing this problem? Below is the c ...

htmlcsstwitter-bootstraptwitter-bootstrap-4