Cascading Style Sheets can be disrupted by Scalable Vector Graphics

Currently, I am incorporating SVG Icons that I created in Illustrator into my Vue.js Webapp. I have utilized Webpack's "require" to load the icons. Rather than accessing the SVGs directly using the src attribute of the img tag, I am inserting them using Vue in the following manner:

<div class="section-icon" v-html="getIconForEvent(event)"></div>

This method successfully displays the icon in the correct location, but I have encountered some issues with this approach.

All the SVGs come with their own style embedded within them, leading to a problem where the style of the last SVG overwrites the style of all the previous SVGs as they share the same class attribute. This can be observed in the Chrome Devtools like this.

Is there a way I can prevent the styles of different SVGs from conflicting with each other? I did not manually insert the style tags, they are inherent to the SVGs themselves. Appreciate your help!

csssvgwebpackvue.js

Answer №1

If you find yourself facing the issue of conflicting class names in your SVG files, fear not for there is a simple solution at hand.

It seems that you are utilizing Illustrator for generating these SVGs. To overcome this hurdle, be sure to instruct Illustrator, during the SVG saving process, to refrain from utilizing <style> elements for element styling.

When saving, navigate to File > Save As > SVG, then proceed to "More Options" and modify the "CSS Properties" setting. If it is currently set to "Style Elements", switch it to any of the other available options. By doing so, classes will not be used, thereby eliminating clashes between your SVG files.

To rectify the existing SVGs causing this conflict, reload them and save using the aforementioned method.

Answer №2

One way to style them with CSS is by targeting them as children elements:

.cls-3:first-child {
   fill:yellow;
}
.cls-3:nth-child(2) {
   fill:red;
}

...

.cls-3:last-child {
   fill:blue;
}

Experiment with different colors to test if the styles are being applied. If you encounter difficulty, consider using the !important rule as a last resort, although it is generally not recommended.

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

How can we display an absolutely positioned div when hovering over a card with the help of Tailwind CSS?

I am currently working on a Next.js application with Tailwind CSS. I would like to implement a feature where additional information is displayed when hovering over a product card, similar to the functionality seen on wildberries.ru. I have tried using &apo ...

cssreactjsnext.jstailwind-csscss-position

Exploring the world of components and experimenting with nesting them

As I am delving into Vue.js, I am attempting to nest two components without diving straight into cli or webpack. My approach involves avoiding import/export statements. However, upon inspecting the browser's console, I encountered the following warnin ...

vue.js

CSS Problems in IE9 Causing Alignment Issues with Two Items in List Item

Take a look at this: JSFiddle The code looks fine in firefox, chrome, and opera, but in ie9, the numbers are shifting. Please see the image for reference. Everything is correct on the left, but on the right is ie9. I'm stuck and need help to solve ...

htmlcssinternet-explorerlist

Tips on saving information received from an API using Vue and axios into a variable that can be easily utilized in another tool or library such as chart.js

I'm struggling to save information from an API into a variable using Vue and axios. However, when I attempt to display the variable with document.write(this.info), it only shows undefined. How can I ensure that the variable contains data retrieved fro ...

vue.jsaxios

Encountering an error while running Laravel Mix's npm development script

When attempting to run npm run development, I encountered the following error: let mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |------------------------- ...

laravelnpmvue.jsnpm-installlaravel-mix

Is it a good idea to relocate the pagination to the top of the DataGrid in MUI

Can someone suggest a solution for moving the default pagination of XGrid above the table? Or do I need to develop my own custom pagination instead of using the built-in feature with XGrid? ...

cssreactjsmaterial-ui

Securing some room beneath the table

I need some extra room below my table. <table border="0" class="medtable"> <tr> <th>User</th> <th>From</th> <th>To</th> </tr> <tr> ... </tr> ...

csshtml-table

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

javascripthtmlcss

Arranging Bootstrap Cards in an Orderly Stack

I recently created a set of bootstrap cards displayed like this: <div class="card-deck"> <div class="card"> <img class="card-img-top" src=".." alt="Card image cap"> <div class="card-body"> <h5 cl ...

htmlcssbootstrap-4

Proper Alignment of Div Elements

Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in r ...

htmlcss

Tips for converting an entire column along the vertical axis to a different language

Looking for a solution with my grid view where I want to translate the items of the second column on the y axis, as shown in the image. I attempted to use the translateY() function, but it resulted in the need to scroll in order to see the translated items ...

cssgridviewfrontendgridweb-frontend

Ways to enhance a Vue component using slots

I am looking to enhance a third-party library component by adding an extra element and using it in the same way as before. For example: <third-party foo="bar" john="doe" propsFromOriginalLibrary="prop"> <template v ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Troubleshoot: Font Rendering Issue with CSS3 @font-face in Opera 11.x

Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup: In the ...

cssoperafont-face

The difference between see-through shades and rgba(0,0,0,0)

What are the primary benefits of using: background-color: rgba(0,0,0,0); over: background-color: transparent; ? ...

css

Unique background image that perfectly aligns with the dimensions of a single full screen

Does anyone know how this webpage achieves the effect of having a full-screen background that ends when scrolling down? I have noticed that the picture of the desert always covers my entire browser screen but is not a typical full-screen background as it ...

htmlcssbackgroundbackground-image

Tips for passing the same value to two components using vuejs $emit

Can someone help with typing in Main, where the value can also be Test World? You can view a sample here >>> Sample The issue I'm facing is that when a user adds an item to the cart, the cart shows one more than it should. I've tried t ...

typescriptvue.js

What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #123456; } #object { background-color: cornsilk; border: #333 3px solid; ...

htmlcss

remove a section from the main body

body { display: flex; justify-content: center; align-items: center; background: #0e1538; } <canvas id="spaceholder" width="804" height="604"></canvas> </div> <div class="MenüCenter"> <canvas id="canvas" width="800" ...

javascripthtmlcss

Using CSS margins for elements lacking specific widths

Is there a way to centrally align a div element that doesn't have a set width? <html> <head> <title></title> <style type="text/css"> .outer { padding: 10px; /*margin: auto; (doesn´t work)*/ ...

htmlcsscentering

Combine values in CSS without any spacing

Currently, I am attempting to create a LESS mixin that can take a numerical value (degrees for rotation) and generate the appropriate CSS code to rotate an element. However, I am facing difficulties trying to handle both "270deg" and the integer "3" (which ...

cssless