When SVGs are loaded, vue-svg-loader is known to eliminate select <g> tags

I have successfully integrated an external SVG into my Vue application as a Vue Component using the vue-svg-loader. This is the loader configuration I used to ensure that IDs are not removed:

{
  test: /\.svg$/,
  loader: 'vue-svg-loader',
  options: {
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true},
        {cleanupIDs: false}
      ]
    }
  }
}

The structure of the SVG I am trying to load is as follows:

<svg class="external-svg">
   <g class="group-1">
      <path id="a"></path>
      <path id="b"></path>
      <path id="c"></path>
   </g>
   <g class="group-2">
      <path id="d"></path>
   </g>
   <g class="group-3">
      <path id="e"></path>
      <path id="f"></path>
      <path id="g"></path>
   </g>
   <g class="group-4">
      <path id="h"></path>
   </g>
   <g class="group-5">
   </g>
</svg>

Although the svg loads successfully with the loader, some of the group tags get dropped. The final result is missing "group-2", "group-4" and "group-5", but the paths inside remain intact.

If anyone has encountered this issue or knows of a solution, your input would be greatly appreciated!

Thank you!

javascriptsvgvue.jsexternalloader

Answer №1

If you're facing a similar issue, I have found a solution that might help. Here's what you can do to resolve it: Modify the loader configuration as shown below:

{
  test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true},
        {cleanupIDs: false},
        {collapseGroups: false},
        {removeEmptyContainers: false}
      ]
    }
  }
}

You can find additional configurations for the loader here.

Answer №2

Vue CLI users, take note:

*vue.config.js*


module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [
            { cleanupIDs: false },
            { collapseGroups: false },
            { removeEmptyContainers: false },
          ],
        },
      });
  },
};

If you're looking to avoid cleaning up IDs or collapsing groups, this is the solution for you.

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

Show User Input as a dynamic tool-tip in Highcharts

Is it possible to gather 12 user inputs through multiple text areas in a popup dialog box, and then use these inputs as tooltips for various points on a graph like the one shown in this demo: http://www.highcharts.com/demo/line-labels? I haven't found ...

javascriptjqueryhighcharts

Setting default parameters for TypeScript generics

Let's say I define a function like this: const myFunc = <T, > (data: T) => { return data?.map((d) => ({name: d.name}) } The TypeScript compiler throws an error saying: Property 'name' does not exist on type 'T', whic ...

javascriptreactjstypescriptgenerics

How to synchronize $scope variables between controllers in AngularJS

As a newcomer to Angular, I have a seemingly simple question regarding setting up a comments system for articles. I've implemented two angular controllers - one for loading comments upon page load and another for submitting new comments to the server. ...

javascriptangularjs

Troubleshooting axios GET request in JavaScript: despite successfully pushing data to an array, encountering errors when using promise

I'm attempting to send a GET request to a free API in order to retrieve an array of all French departments. Initially, I encountered an issue where I was getting an empty result, which I later figured out was due to not waiting for the GET request to ...

javascriptaxios

"Process the contents of a file by reading it line by line in a

Currently, I am reviewing the documentation for the nodejs readline module in order to tackle a task that involves reading a very large file line by line. The solution using readline seems promising, although I require it to read lines synchronously - mean ...

javascriptnode.jsparsingreadline

Guide on showcasing an array of objects in HTML with the help of the template element

My goal was to populate the HTML page with an array of objects using the template element. However, I made a mistake and only the last object in the array was displayed correctly on the page. Can anyone help me identify my error and suggest a correction? I ...

javascripthtml

Delaying Jquery on scroll Event

Hey there, I've got a set of icons that I'd like to reveal one by one as you scroll down. I've incorporated some animations from , but now I'm wondering how I can implement a delay function in my jQuery so the icons appear sequentially ...

javascriptjqueryhtmlcss

What is the reason that the keyword 'in' does not function for verifying the presence of a particular word within an array in JavaScript?

Currently, I am focused on string manipulation for a chatbot. My main objective is to identify a specific word within a returned string message. Here is an example of my approach: let msg = 'how are you?' //An illustration of ...

javascriptarrays

Encountering an "invalid query parameter" error when making a find request with FeatherJS and ReactJS

Adding $show:true to the data below results in an error when making the find request. However, when I remove $show:true, everything works perfectly with no errors. The error message states: Invalid query parameter $show. I have attempted using differe ...

javascriptnode.jsreactjsfeathersjsfeathers-sequelize

"Enhancing Webpages with AngularJS: The Power of Binding and Re

Using AngularJS to load AJAX content and ng-repeat to generate a list of items. I have a placeholder {{noun}} in the content, expecting it to be replaced with data from $scope.noun when the AJAX content is loaded. However, this does not happen automaticall ...

javascriptajaxangularjs

How can I create numerous HTML containers using Javascript?

I've been learning from this tutorial: Instead of just displaying the last database object, I want to display all of them. I have tried outputting the database contents and it's working fine. Now, I just need to adjust the HTML. I attempted to ...

javascripthtmlfirebasefirebase-realtime-database

Having trouble invoking html2canvas within an AngularJS app

When I define html2canvas functions in my controller, the alert in html2canvas doesn't get fired and my canvasToImageSuccess function is not executed. Am I missing something here? In my controller, I have defined html2canvas functions as shown below ...

javascriptangularjshtml2canvas

Troubleshoot: Unable to utilize mapActions with Vuex modules

Having trouble using mapActions to reference actions in my modules. The Vuex docs say that module actions are not namespaced by default, so they should be accessible like main store actions. Here's how I have things set up: Store import * as ModuleA ...

javascriptvue.jsvuex

Fill the table with information from two different datasets and input the data into the same cell

I have an issue with populating a table using two data sets. So far, I am able to populate the table from the first data set. However, I do not want to simply append the second data set (data2). Instead, I want to add the data in the same td's below ...

javascriptjqueryarraysecmascript-6html-table

Is there a period, question mark, apostrophe, or space in the input string?

Currently, I am in the process of developing a program that can determine if an input string includes a period, question mark, colon, or space. If these punctuation marks are not present, the program will return "false". However, if any of them are found, ...

javascript

Sharing State with a Secure Route in Vue Router (using the script setup method)

Hello everyone, I'm encountering an issue while trying to send a state to the protected routes in vue-router. The error that I faced mentioned "Discarded invalid param(s) "_id", "dish_name", "description", "img" ...

javascriptvue.jsvuejs3vue-router

Adding an image to a jQuery class name on the fly

I am attempting to add an image before a div by using its className with jQuery. function insertImage(obj) { var dynamicClass = $(obj).prop("className"); After retrieving the classname, I now encapsulate it in single quotes and add a dot to access t ...

javascriptjqueryhtml

Animation that responds to scrolling movements

Is there a way to animate text based on scrolling? <p class="class">TEXT</p> transform:translateX(-500px);opacity:0; transform:translateX(0px);opacity:1; ...

javascripthtmlcss

Stop click event from firing on a disabled tree node within an angular custom directive template

In the browser, my custom Angular tree component is displayed like this: + Parent 1 + Child 1-A - Child 1-A-A - Child 1-A-B - Child 1-A-C + Child 1-B + Child 1-C This is what the directive template looks like: <ul> &l ...

javascriptjqueryhtmlcssangularjs

Using JavaScript to trigger an action when the iframe or page is fully loaded by the user pressing

I am working on a webpage that includes an iframe, and I am trying to simulate a "return key" press when the page loads. I have heard that using the onload event should do the trick, but it doesn't seem to be working for me. I don't have much exp ...

javascriptiframeonloadloaded