Encountering challenges with incorporating SVG elements in HTML and styling them with CSS

There seems to be an issue that I am encountering. I have incorporated an SVG in my HTML page, but it doesn't seem to be visible. The background of the page has a gradient effect applied to it.

<div id="logo">
    <svg class="icon icon-outline"><use href="#icon-name" fill="#ffffff" xlink:href="ic_fingerprint_48px.svg"/></svg>
    <h1>webSecure</h1>

</div>

.icon {
            fill: white;
            width: 48px;
            height: 48px;
        }

I am scratching my head trying to figure out where I might have gone wrong. Any suggestions or ideas?

htmlcsssvg

Answer №1

If you plan to work with an SVG file exclusively, there is no necessity for the svg tag. You can opt for a standard img tag instead:

#logo img {
    width: 48px;
    height: 48px;
}
<div id="logo">
    <img src="ic_fingerprint_48px.svg"/>
    <h1>webSecure</h1>
</div>

If you wish to employ inline SVG code to allow CSS-driven changes in the fill color, you will need to extract the code from the original svg file:

.icon {
    width: 48px;
    height: 48px;
}
  .icon path {
    fill: red;
}
<div id="logo">  
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M35.62 8.94c-.16 0-.31-.04-.46-.11C31.33 6.85 28 6 24.02 6c-3.97 0-7.71.95-11.14 2.82a1.004 1.004 0 01-.96-1.76C15.65 5.03 19.72 4 24.02 4c4.26 0 7.98.94 12.06 3.05.49.25.68.86.43 1.35-.18.34-.53.54-.89.54zM7 19.44c-.2 0-.4-.06-.58-.18a.996.996 0 01-.24-1.39c1.98-2.8 4.51-5 7.51-6.55 6.29-3.25 14.33-3.26 20.63-.02 2.99 1.54 5.51 3.72 7.5 6.5...

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

Modifying website elements with JavaScript

Can someone assist me with getting a script to work on my website that will allow me to switch between four different sets of content using buttons labeled 1, 2, 3, and 4? I have tried using addClass and removeClass but cannot seem to get it right. Here i ...

javascriptjqueryhtmlcss

Issue encountered when trying to import an image URL as a background in CSS using Webpack

I have been trying to add a background image to my section in my SCSS file. The linear gradient is meant to darken the image, and I'm confident that the URL is correct. background-image: url(../../assets/img/hero-bg.jpg), linear-gradient(r ...

javascripthtmlwebpacksass

Effortlessly navigate between Formik Fields with automated tabbing

I have a component that validates a 4 digit phone code. It functions well and has a good appearance. However, I am struggling with the inability to autotab between numbers. Currently, I have to manually navigate to each input field and enter the number. Is ...

javascriptcssreactjsnext.jsformik

How can I access an InputStream from a local XML file in a PhoneGap application?

Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...

javascripthtmlcordova

Enhance Your Text Areas with Vue.js Filtering

Currently, I am working with a textarea that has v-model: <textarea v-model="text"></textarea> I am wondering how to filter this textarea in Vue. My goal is to prevent the inclusion of these HTML quotes: &amp;amp;#039;id&amp;amp;#039 ...

javascripthtmlvue.jsvuejs2vue-component

Steps for dealing with uncaught exceptions in react and displaying a straightforward "internal error" notice on the user interface

When working on the node side, // Handling uncaught exceptions with Node.js process.on('uncaughtException', (error, source) => { fs.writeSync(process.stderr.fd, error, source); }); How can we achieve similar functionality in React for the ...

javascripthtmljqueryreactjsfrontend

"Utilize CSS GRID without the need for ::before and ::after in grid layouts

While working with CSS Grid, I noticed that the grid also includes the before and after elements as grid items. Is there a way to address this issue? .wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-gap: 10px; background- ...

csscss-grid

Ways to maintain the collapsed sidebar state during redirection to a new page

I'm currently working on an admin dashboard and I want the sidebar to remain collapsed even when transitioning from one page to another. Initially, I prefer it to be expanded but after clicking the hamburger toggle button, it collapses. However, I don ...

jqueryhtmlcss

Using nextJS to establish a context within a Server Component and incorporating a new library

I attempted to incorporate Framer Motion into my project, but when I added it, an error occurred. The error message displayed was: TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Fo ...

javascripthtmlcssreactjsnext.js

Guide on modifying CSS properties when hovering over the parent element

I am working with a table structure like this: <table> <tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Mom </td></tr> <tr><td class="momdad">< ...

htmlcss

Responsive Bootstrap breadcrumbs for mobile devices

I'm struggling to make my bootstrap tabs mobile-friendly. While I like their appearance on desktop, I find that they don't look great when stacked on top of each other on mobile devices. Is there anyone who can provide some CSS tips on how to sh ...

cssbootstrap-4

Troubleshooting webpack issue: CSS background image fails to load

After reading numerous posts regarding CSS background images not loading, I believe my situation is unique. Here is how I've configured my webpack setup (relevant parts only): { test: /\.(png|svg|jpg|gif)$/, use: [ { ...

cssimageexpresswebpack

adjust division size proportionally to another one

I am trying to create a layout with right and left divisions where the size of the left division matches the height of the browser window (100vh). The left division consists of two sub-divisions that need to have variable sizes but collectively match the ...

htmlcsstwitter-bootstrap

Struggling to target the child elements of an unordered list with jQuery?

Need help with selecting the children of a list item in a jQuery mobile navigation? I am having some trouble with this task. Here is a fiddle demonstrating what I have done so far: http://jsfiddle.net/jhrz9/ <div data-role="panel" id="left-panel" data ...

javascriptjquerycssjquery-mobilejquery-selectors

Printing the footer on a page in ASP.NET is essential for providing additional information

I need to print an HTML page with specific content. The content includes a div with some text to be printed. Additionally, I have a footer with a class of divFooter that contains more content. <div>content to print</div> The CSS for styling t ...

asp.nethtmlcss

Converting Umbraco Json to a CSS class named "[]"

I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...

htmlcssjsonumbracoumbraco7

Is there a way to showcase a lengthy list of numerical values in an organized format using HTML/Bootstrap within the Django framework?

As I work on developing a gym workout database website using Django, one key component of my Workout model is the instructions field. The current setup accepts instructions as a text field: instructions = models.TextField() However, this setup displays al ...

pythonhtmldjangobootstrap-4

How to implement Thymeleaf's notConnected tag when using Spring Social

After transitioning my JSP views to HTML Thymeleaf views, I encountered a problem. In my old JSP views, I used a social:notConnected tag. However, it seems to have been removed and the only one available is social:connected as shown below. <div id="co ...

htmlspringjspthymeleafspring-social

What is the best way to adjust menu alignment for big screens?

Is there a way to set the alignment of a dropdown menu to the right specifically for large screens? <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expande ...

javascriptjqueryhtmlcssbootstrap-4

Injecting dynamic content using JavaScript

My goal is to develop a web page where clicking on any of the three images will cause the content to be inserted into the empty div located above the image links. Below is the JavaScript code I'm using: <script type="text/javascript" src="js/jque ...

javascriptjqueryhtml