bhovhannes / svg-url-loader Goto Github PK

While I understand the SVG should be escaped when represented as a data URI, it is invalid for the served SVG file to contain URI escaped content. The URI escaping should be scoped only to when it is consumed as a data URI.

We need to test if SVG without XML declaration works ok in all modern browsers, including IE11 and Edge.
And if this is the case, stripdeclarations option can be removed and set to true to make it a default behaviour of the loader.

cc @malthejorgensen

I'm having problems to convert SVGs inside sass files. Do you have an example?

Today I have my entryFile - index.js > import main.sass > import X.sass > that have background-image: url("test.svg").

My webpack config is:

module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: {
                        plugins: [require('babel-plugin-transform-es2015-template-literals')]
                    }
                },
                {
                    test: /\.svg/,
                    use: {
                        loader: 'svg-url-loader',
                        options: {}
                    }
                },
                {
                    test: /\.scss|css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 2,
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: () => [require('autoprefixer')],
                                sourceMap: true
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: true
                            }
                        }
                    ]
                }
            ]
        },

I'm unsure if you would consider this within the scope of the project, but felt it might be useful to report to help anyone else in future.

I have noticed that using this method of SVG for background-images, in my case, any image which is over the data threshold of 4026 and not served as an external image appear as pure black, when colours are defined in a <style> block.

This is a Windows 7 machine.

Switching back to using url-loader and the issue cannot be reproduced.

I have attached a zip archive with an svg which is just over the failure threshold when viewed as a background-image

ie11-fail.zip

CSS Background Image not displaying

1. in browser:
   http://funkyimg.com/i/2QLU7.png
2. scss class:
   http://funkyimg.com/i/2QLU8.png
3. webpack.dev.js:
   http://funkyimg.com/i/2QLU9.png

why? please remove

Hi.

I just noticed that one thing is not mentioned anywhere in README, but it may have some value to the users.

So, images with data url appear on the screen way faster than all regular images (even if the regular images are in the browser cache already), at least in Chrome. With data url, the images appear on the screen at the same time the text around them appears. With regular images, they're rendered 100-400ms after the text (even with width/height provided, and the image file is in the cache).

So this plugin improves the rendering impression to the user.

Can you pls include instruction on how to use this in html using the svg tag

Please use file-loader: "^4.2.0" in package.json, or you can do new release on each file-loader version. Now latest file-loader use new version of schema-utils, but this loader use old version and node_modules contains old version of schema-utils. Also some behavior can be improved or changed and it is create incompatibility with original logic in file-loader.

Same for loader-utils

yarn set version berry
yarn add svg-url-loader

➤ YN0002: │ svg-url-loader@npm:5.0.0 doesn't provide webpack@^4.0.0 || ^5.0.0 requested by file-loader@npm:6.0.0

The problem: https://yarnpkg.com/advanced/error-codes#yn0002---missing_peer_dependency
Detailed explanation: https://dev.to/arcanis/implicit-transitive-peer-dependencies-ed0

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

Hi,
I'm trying to use svg-url-loader within a scss file, and it seems to always return the url of the file path instead of the encoded sctring.

my webpack rules are:

{
                test: /\.css$/,
                loader: 'style-loader!raw-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!raw-loader!sass-loader'
            },
            {
                test: /\.svg$/,
                use: {
                    loader: 'svg-url-loader',
                    options: {
                        noquotes: false,
                        limit: 100000
                    }
                }
            }

and my .scss file:

.logo {
    background: url('../images/logo.svg') no-repeat center;
}

css output:

.logo {
    background: url('../images/logo.svg') no-repeat center;
}

what am I missing? Thanks!

Thank you for your package, but I'm surprised not to see CHANGELOG.md.
This is must-have for good package and helps to understand is it possible update package without breaking changes or not.

Could you add CHANGELOG.md?

Hi there,
Thank you for your awesome work.
i've been use it for quite a moment, but today something went wrong.

I tried to use it in scss, like
background-image: url('../../image/ignore/arrow.svg');

But it didn't work fine,
it went out
background-image: url(data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='25px' viewBox='0 0 18 25' enable-background='new 0 0 18 25' xml:space='preserve'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFFFFF' d='M17.338,12.485c-4.156,4.156-8.312,8.312-12.468,12.467 c-1.402-1.402-2.805-2.804-4.207-4.206c2.756-2.757,5.513-5.514,8.27-8.27C6.176,9.72,3.419,6.963,0.663,4.207 C2.065,2.805,3.468,1.402,4.87,0C4.812-0.059,17.425,12.562,17.338,12.485L17.338,12.485z'/%3E %3C/svg%3E);

it should be like
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjI1cHgiIHZpZXdCb3g9IjAgMCAxOCAyNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTggMjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRkZGRkZGIiBkPSJNMTcuMzM4LDEyLjQ4NWMtNC4xNTYsNC4xNTYtOC4zMTIsOC4zMTItMTIuNDY4LDEyLjQ2N2MtMS40MDItMS40MDItMi44MDUtMi44MDQtNC4yMDctNC4yMDZjMi43NTYtMi43NTcsNS41MTMtNS41MTQsOC4yNy04LjI3QzYuMTc2LDkuNzIsMy40MTksNi45NjMsMC42NjMsNC4yMDdDMi4wNjUsMi44MDUsMy40NjgsMS40MDIsNC44NywwQzQuODEyLTAuMDU5LDE3LjQyNSwxMi41NjIsMTcuMzM4LDEyLjQ4NUwxNy4zMzgsMTIuNDg1eiIvPjwvc3ZnPg==);

After I check the API, I set the
noquotes: false,

It works fine again, but the svg source I required in js doesn't work fine again.

Is there an another way to use data-url both in js and css? If yes, is it supported by this loader?

Thanks for the help!

The problem is that when you embed an SVG as a data URI, you don't want quotes around the value, and so the noquotes: true config makes sense to suppress that. However, as soon as you do that, the CSS referenced data URIs break as the expectation is that they are wrapped in quotes there.

I think it's an option to load all svg with size > 4rb with file-loader. But it doesnt' work.

 {
        test: /\.svg/,
        use: {
          loader: 'svg-url-loader',
          options: {
            iesafe: true
          }
        }
      },

Hi, I'm trying to use svg-url-loader along with svgr, which requires to test for issuer to only use svgr in jsx context. I also need to be able to import svgs as data uris from jsx. While trying to do so I've encountered the following data uri generated by svg-url-loader:

data:image/svg+xml,module.exports = 'data:image/svg+xml,%253Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%253E %253Cpath d='M9.04158... (the path is omitted)

which, of course, cannot be displayed.

Here's the (simplified) code that imports the svg:

import React from 'react';
import starUrl from './star.svg';

export default function ComponentWithIcon() {
  return (
    <div>
      <img src={starUrl} alt="icon" />
    </div>
  );
}

and the rules section of the webpack config that produces this follows:

      {
        test: /\.svg$/,
        issuer: {
          test: /\.(tsx?|jsx?)$/,
        },
        use: {
          loader: 'svg-url-loader'
        },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-url-loader'
        },
      },

(no other loaders for svg are configured)
If I remove the first rule with issuer test, the same import produces correct data, without the module.exports = 'data:image/svg+xml,

Similar to svg-fill-loader

E.g.:

.selector {
  background-image: url(../../assets/ticket.svg?noquotes=false);
}

This overrides noquotesoption from Webpack loader config.

It should be very easy by just merging webpacks this.resourceQuery with regular query in Line 10

Is it possible to use filters with loader?

For example, I have an SVG like below:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
        <feGaussianBlur stdDeviation="25"/>
    </filter>
</svg>

For using this filter on my background I need to have styles like that:

article {
        filter: url(../img/blur.svg#blur); /* TODO Need omit for getting working, as data not working */
}

How to point to #blur after the output file generated?

npm WARN [email protected] requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

Also be great add webpach supported versions in peerDependencies. 👍

Hi,

Thanks for this plugin, works perfectly.

I use a configuration to import all svg content into my CSS files thanks to my webpack configuration (webapck 3):
{
test: /.svg/,
use: [{
loader: 'svg-url-loader',
options: {
stripdeclarations: true,
encoding: 'base64'
}
},
{
loader: 'image-webpack-loader',
options: {
}
}]
}

For some svg I'd like to not import them but keep the link to the file instead. Is it possible?

Example:

.includedSVG {
background-image: url('path_to_ressources/file.svg'); //content is loaded in my file
}

.notIncludedSVG {
background-image: url('svg-url-loader?-disable,path_to_ressources/file.svg'); //DOEST NOT WORK, but I guess it's something like this
}

Have a good day
Dorian

It would be nice if I could do (a variation) of this:

background-image: url('../../styles/icons/angle-right.svg?fillColor=#f00f00');

The resulting SVG would be generated using the provided parameters.

My loader configuration:

loaders: [
  {
    test: /\.svg/,
    loader: 'svg-url'
  },
  {
    include: path.resolve(__dirname, './../client'),
    loader: 'babel',
    test: /\.js$/,
  },
  {
    loaders: [
      {
        loader: 'style',
        query: {
          sourceMap: 1
        }
      },
      {
        loader: 'css',
        query: {
          'modules': 1,
          'importLoaders': 1,
          'localIdentName': '[path]___[name]___[local]'
        }
      },
      'resolve-url',
      'sass'
    ],
    test: /\.css$/
  },
  {
    loader: 'file?name=[name].[ext]',
    test: /\.(ttf|otf|eot|svg|woff2?)(\?[a-z0-9]+)?$/
  }
]

The input:

.share-facebook {
  background-image: url('./facebook.svg');
}

.share-twitter {
  background-image: url('./twitter.svg');
}

The output:

.client-components-ArticleComponent-static-___styles___article .client-components-ArticleComponent-static-___styles___share-controls .client-components-ArticleComponent-static-___styles___share-facebook {
  background-image: url("data:image/svg+xml;charset=utf8,module.exports = __webpack_public_path__ + 'facebook.svg';");
}

.client-components-ArticleComponent-static-___styles___article .client-components-ArticleComponent-static-___styles___share-controls .client-components-ArticleComponent-static-___styles___share-twitter {
  background-image: url("data:image/svg+xml;charset=utf8,module.exports = __webpack_public_path__ + 'twitter.svg';");
}

Using:

"webpack": "^2.1.0-beta.20",
"svg-url-loader": "^1.1.0",

I need to post-process the value of SVG in SASS.

Use case is defined here, http://stackoverflow.com/a/33435726/368691.

Is there a way to load the SVG as a string into SASS variable?

In effect, it would need to generate a code that looks like this:

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

I am assuming that sass loader runs after svg-url-loader. Is that a correct assumption?

webpack 2.0

Module build failed: Error: parseQuery should get a string as first argument

@bhovhannes This bug is already fixed by loader-utils v0.2.16, but when will the new version of svg-url-loader be released?

hi

i'm trying to use the svg loader:

let img2 = require('svg-url?noquotes!../../../resources/light/images/icons/svg/column_chart_colored.svg');
        return (
                <img src={img2 }/>
);

there's no error but the svg is not appear (it's like it didn't find it in he's path)
what do you think could be the problem?

in the webpack config:

   test: /\.svg/,
       loader: 'svg-url-loader'

Hi there,

thanks for the good work.

I am trying to load fragments of SVG to my class, but it seems the output is incorrect:

.icon--cat {
  background: url('./../assets/css-loaded/sprite.svg#icon-cat-outline');
}

and my webpack config:

{
  test: /css-loaded\/[\S]+.svg/,
  loaders: ['svg-url-loader']
}

And this is the ouput I can see in Chrome:

background: url("data:image/svg+xml;charset=utf8,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.…%3E%3Csymbol viewBox='0 0 0 0' id='sprite'/%3E%3C/svg%3E"#icon-cat-outline);

which is ignored as invalid.

Is this even possible? If yes, is it supported by this loader?

Thanks for the help

It took me a while to figure this out (I'm new to webpack), I was about to fork your repository and edit things so that I could remove the quotes. If you have the following in your documentation stating that you can remove quotes by adding the query parameter to the webpack.config.js it would be much easier to use.

module.exports = {
  //...
    module: {
        loaders: [
            { test: /\.svg/, loader: 'svg-url-loader', query: { noquotes: true }}
        ]
    },
    //...
};

I am using svg-url-loader in my webpack config file:

            {
                test: /\.svg$/i,
                // fonts need to be loaded
                // exclude: /fonts/,
                loader: "svg-url-loader",
            },

This CSS is required in main.js, it specifies an svg font:

@font-face {
    font-family: 'Sofia Pro';
    src: url('./_webfonts/sofiapro-bold-webfont.eot');
    src: url('./_webfonts/sofiapro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./_webfonts/sofiapro-bold-webfont.woff2') format('woff2'),
         url('./_webfonts/sofiapro-bold-webfont.woff') format('woff'),
         url('./_webfonts/sofiapro-bold-webfont.ttf') format('truetype'),
         url('./_webfonts/sofiapro-bold-webfont.svg#sofia_probold') format('svg');
    font-weight: bold;
    font-style: normal;
}

In this case, all other font formats also dont work. If uncomment the exclude for svg-url-loader, the woff is loaded correctly.

Version 2.0.2 of codecov just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As codecov is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I am using some svgs in css and some in img tags... I don't know how uncommon this use case is.

It seems I need noquotes to make images work, but that breaks css...

Why is this a problem in svg-url-loader, but not a problem in url-loader?

I love the smaller payload, but i'm temporarily back on url-loader until I can figure this out.

Summary:

For SVG URLs used in HTML (eg via a template loaded via html-loader by HtmlWebpackPlugin), superfluous quotes are added to the HTML markup, that break rendering in the browser. Whilst svg-url-loader has a noquotes option, I wouldn't have expected to have to use it for this use-case given that it's supported natively by url-loader.

STR:

Run yarn install && yarn webpack using node 8.5.0 and this test project:

package.json

{
  "scripts": {
    "start": "webpack"
  },
  "dependencies": {
    "clean-webpack-plugin": "^0.1.17",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "svg-url-loader": "^2.2.0",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0"
  }
}

webpack.config.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ['html-loader']
      },
      {
        test: /\.svg$/,
        use: ['svg-url-loader']
      }
    ]
  }
};

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Testcase</title>
  </head>
  <body>
    <img src="./test.svg" alt="Test SVG image">
  </body>
</html>

src/test.svg

<?xml version="1.0"?>
<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
</svg>

src/index.js

// Empty file

Expected:

That svg-url-loader acts as a drop in replacement for url-loader (or if that's not intended, then this ideally would be made clearer in the README).

ie: The resultant dist/index.html should still:

• display the SVG image when loaded in eg Firefox Nightly
• pass HTML validation according to https://html5.validator.nu/

Actual:

The resultant dist/index.html:

• doesn't display in Firefox Nightly correctly (no image shown, just the alt text)
• doesn't pass HTML validation on https://html5.validator.nu/ due to the extra set of quotes (plus also a whitespace issue, though that's less of a problem since even with that, the image would still work in the browser)

The generated file contents:

<!DOCTYPE html>
<html>
  <head>
    <title>Testcase</title>
  </head>
  <body>
    <img src=""data:image/svg+xml,%3C?xml version='1.0'?%3E %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect x='10' y='10' height='100' width='100' style='stroke:%23ff0000; fill: %230000ff'/%3E %3C/svg%3E"" alt="Test SVG image">
  <script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Compared to the output when svg-url-loader is replaced by url-loader in webpack.config.js:

<!DOCTYPE html>
<html>
  <head>
    <title>Testcase</title>
  </head>
  <body>
    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHJlY3QgeD0iMTAiIHk9IjEwIiBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCIKICAgICAgICAgIHN0eWxlPSJzdHJva2U6I2ZmMDAwMDsgZmlsbDogIzAwMDBmZiIvPgo8L3N2Zz4=" alt="Test SVG image">
  <script type="text/javascript" src="main.bundle.js"></script></body>
</html>

Modifying both svg-url-loader and url-loader locally, adding console.log() calls to show the raw string being returned by each loader, gives...

svg-url-loader:

module.exports = "\"data:image/svg+xml,%3C?xml version='1.0'?%3E %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Crect x='10' y='10' height='100' width='100' style='stroke:%23ff0000; fill: %230000ff'/%3E %3C/svg%3E\""

url-loader:

module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgICAgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPHJlY3QgeD0iMTAiIHk9IjEwIiBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCIKICAgICAgICAgIHN0eWxlPSJzdHJva2U6I2ZmMDAwMDsgZmlsbDogIzAwMDBmZiIvPgo8L3N2Zz4="

;charset=utf8 part in css url() seems to be excessive. It looks like modern browsers can parse such SVGs correctly without it, while IE needs url-encoding of non-ascii symbols anyway.

While I 100% agree that base64 encoding of SVGs is less ideal than just embedding the escaped SVG XML, it would be convenient if we had a way of using base64, while taking advantage of the 4096 byte limit.

Because of #81 it is not possible to use a single webpack config for SVGs across both CSS and JS. This is inconvenient as it requires our developers to remember to prefix every JS import with jsSvg (which will set noquotes to true). If the SVGs were encoded to base64, noquotes can be set to true across the board, meaning that there would be no extraneous quotes in JS imports, and CSS handles base64 encoded strings that aren't wrapped in quotes. Until the issue in the CSS loader is fixed, this is the ideal solution in our eyes.

#cceef3 - will be converted to: %23cceef3

<style type="text/css">
        .st0{fill:none;}
        path { fill: #cceef3; }
    </style>

The entire SVG in question

<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 519 500" version="1.1" viewBox="0 0 519 500" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        .st0{fill:none;}
        path { fill: #cceef3; }
    </style>
    <path d="m170.4 258.1l20-126.2h-21.4c-10 0-22.9-5.6-26.7-15.9-1.2-3.5-4.1-15.5 12.4-27.1 5.9-4.1 9.7-8.6 10.5-12.1 0.8-3.6-0.2-6.8-2.7-9.3-3.6-3.5-10.8-5.5-19.9-5.5-15.3 0-26.1 8.8-27.1 15.2-0.8 4.7 2.9 8.5 6.1 10.9 9.6 7.1 11.8 17.4 5.9 27.1-6.1 10-19.3 16.5-33.4 16.7h-21.8c-1.8 12.3-31.5 200.6-33.8 215.5h118.4c1.1-6.7 6.5-42.3 14-89.3h-0.5z"/>
    <path class="st2" d="m329.1 21.5h-120.6l-16.1 102.1h20.5c11.2 0 21.8-5.2 26.4-12.6 1.5-2.4 2.1-4.5 2.1-6.5 0-4.2-2.9-7.4-5.8-9.6-7.9-5.9-9.6-12.1-9.6-16.5 0-0.9 0-1.7 0.2-2.4 1.7-10.8 16.2-22.4 35.5-22.4 11.5 0 20.3 2.7 25.6 7.7 4.7 4.4 6.5 10.6 5.2 17.1-1.7 7.7-9.4 14.1-13.8 17.3-11.7 8.2-10.2 15.3-9.4 17.4 2.4 6.4 11.7 10.5 18.8 10.5h31.1v0.2c42.5 0.3 65.2 19.9 58.1 65.4-6.7 42.3-39.1 60.5-77.8 60.8l-15.3 97.7h22.6c95.4 0 173.3-61.3 188.6-158 19-120.3-57.2-168.2-166.3-168.2z"/>
    <path d="m329.1 21.5h-120.6l-16.1 102.1h20.5c11.2 0 21.8-5.2 26.4-12.6 1.5-2.4 2.1-4.5 2.1-6.5 0-4.2-2.9-7.4-5.8-9.6-7.9-5.9-9.6-12.1-9.6-16.5 0-0.9 0-1.7 0.2-2.4 1.7-10.8 16.2-22.4 35.5-22.4 11.5 0 20.3 2.7 25.6 7.7 4.7 4.4 6.5 10.6 5.2 17.1-1.7 7.7-9.4 14.1-13.8 17.3-11.7 8.2-10.2 15.3-9.4 17.4 2.4 6.4 11.7 10.5 18.8 10.5h31.1v0.2c42.5 0.3 65.2 19.9 58.1 65.4-6.7 42.3-39.1 60.5-77.8 60.8l-15.3 97.7h22.6c95.4 0 173.3-61.3 188.6-158 19-120.3-57.2-168.2-166.3-168.2z"/>
    <path d="m32.1 390.9h48.4c20.6 0 25.6 10.5 24.1 20-1.2 7.7-6.5 13.5-15.6 17.3 11.5 4.4 16.1 11.2 14.4 22-2.1 13.5-13.8 23.5-29.1 23.5h-55l12.8-82.8zm32 34.3c9.4 0 13.8-5 14.7-10.9 0.9-6.4-2-10.8-11.4-10.8h-8.3l-3.3 21.7h8.3zm-5.1 35.8c9.7 0 15.3-3.9 16.7-12 1.1-7-2.9-11.1-12.3-11.1h-9.6l-3.6 23.2h8.8v-0.1z"/>
    <path d="m171.2 474.3c-12.6 0.9-18.7-0.5-21.7-5.9-6.7 4.1-14.1 6.2-22 6.2-14.3 0-19.3-7.4-17.9-15.6 0.6-3.9 2.9-7.7 6.5-10.9 7.9-6.8 27.3-7.7 34.9-12.9 0.6-5.8-1.7-7.9-8.8-7.9-8.3 0-15.3 2.7-27.3 10.9l2.9-18.8c10.3-7.4 20.3-10.9 31.8-10.9 14.7 0 27.8 6.1 25.3 22.1l-2.9 18.2c-1.1 6.4-0.8 8.3 6.4 8.5l-7.2 17zm-21.8-28.5c-6.7 4.2-19.1 3.5-20.5 12.3-0.6 4.1 2 7.1 6.1 7.1 3.9 0 8.8-1.7 12.7-4.4-0.3-1.5-0.2-3 0.3-5.9l1.4-9.1z"/>
    <path d="m194.7 409.6h25.2l-1.4 8.3c8-6.8 14.1-9.4 22-9.4 14.1 0 20.6 8.6 18.3 22.7l-6.5 42.3h-25.2l5.5-35c1.1-6.4-0.9-9.4-5.8-9.4-3.9 0-7.6 2.1-11.1 6.8l-5.8 37.5h-25.2l10-63.8z"/>
    <path d="m278.4 390.9h25.2l-6.4 40.6 24.1-22h31.1l-30.9 27.3 24.9 36.7h-31.7l-19.2-29.5h-0.3l-4.5 29.6h-25.2l12.9-82.7z"/>
    <path d="m367.6 390.9h29l-12.7 82.6h-29l12.7-82.6z"/>
    <path d="m410.6 390.9h41.4c32 0 41.2 23.2 38.2 42.5-2.9 18.8-17.7 40.2-45.8 40.2h-46.7l12.9-82.7zm26.9 62.9c14.1 0 21.8-7 24.1-21.7 1.7-10.9-1.7-21.7-17.3-21.7h-7.7l-6.7 43.4h7.6z"/>
    <rect class="st0" x=".7" y="2" width="517.6" height="500"/>
</svg>

bug reproduce procedure

1. main html:main.html

    <html>
      <body>
        <div>Hello svg</div>
        <script type="text/javascript" src="bundle.js"></script>
      </body>
    </html>
    

2. one svg file named 100.svg,just filled circle:

<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="#000"/></svg>
3. import svg file from main.js:

    var img1 = document.createElement("img");
    img1.src = require("./100.svg")
    document.body.appendChild(img1);

3. and config svg-url-loader in config file (webpack.config.js)：

    module.exports = {
      entry: './main.js',
      output: {
        filename: 'bundle.js'
      },
      module: {
        loaders:[
          {test: /\.svg/, loader: 'svg-url-loader?limit=10000'},
        ]
      }
    };

limit is larger enough force loader make Data URLs other than external svg file,and install loader:

npm i svg-url-loader --save-dev

then run bundle and open main.html:

webpack

img is break link .but if limit=1 ,then OK.

and one more thing ,I find :

module.exports = "\"data:image/svg+xml;charset=utf8,

in last lines of bundle.js .I think \" is root cause .

thank you for attention .

[email protected]

When the loader is used without options, like this:

				{
					test: /\.svg$/,
					exclude: /font/,
					loader: "svg-url-loader"
				},

Build fails with "Module build failed: TypeError: Cannot read property 'limit' of null", once for every svg file the loader attempted to process.

This is easily worked around by supplying empty options:
When the loader is used without options, like this:

				{
					test: /\.svg$/,
					exclude: /font/,
					loader: "svg-url-loader"
				},

but it would be nice to not have to do this, like with other loaders.

My guess is old loader-utils would return an empty object when there's no options but the new ones return null.

Can we use this loader on css files where I am including css files?

I am trying this and it does not seem to work when I am also using 'svg-sprite-loader' which I am using for loading icons in js

After running yarn as normal, now require('svg-url-loader!../../images/foo.svg'); (and require('!svg-url-loader!../../images/foo.svg'); ) results in the error message, Module not found: 'svg-url-loader' under [email protected]. Before that run of yarn, the error was never seen, and the error is not seen under [email protected]. The project has many packages, all of which load fine under [email protected], except svg-url-loader.

Be great have one awesome loader. I am a member of webpack-contrib and can help with this. Your will also remain the main contributor. I asked about this in webpack-contrib slack channel and give 👍 from main contributors webpack/webpack-contrib. What do your think about this?

I recently built with the latest version and it broke the our build due to some changes.

index.js line 10 previous returned an empty obj {} when this.query was undefined or null,
var query = loaderUtils.getOptions(this);

it now returns undefined which causes line 12,
var limit = query.limit ? parseInt(query.limit, 10) : 0;

to throw a TypeError trying to access the limit property.

This actually looks to be an update to parseQuery.js from the loader-utils npm module that is packaged into this module. However, the most previous update to that moduel was in March of this year so it wasn't until this version was updated that we noticed the breaking change.

I was able to fix this in my webpack configuration by adding a query param to the loader. Previously, that param was not necessary.

module: {
	loaders: [
		{
			loader: "svg-url-loader",
			test: /\.svg/,
			query: {}
		}
                // other loaders

There's this tool that can optimize SVGs and get rid of unnecessary text within SVG files outputted by tools like Illustrator, Sketch, etc. It can sometimes reduce the file size by 50% or more.

https://github.com/svg/svgo

I think it makes sense to run our imports through this before the rest of the url loader conversion work.

Let me know if this is a good idea, I can help with a PR if needed.

Hi!
First of all, this loader is amazing! Kudos!

The project that I'm working on has a lot of svgs as img sources, e.g.:

import CoolSvg from '../assets/Cool.svg';

<img src={CoolSvg} />

The output of this loader is producing an additional quotes that is preventing the SVG to appear on the page:

If I manually remove it, it does work.

Hey there, is it possible with the loader to phrase through the html and replace e.g. with the corresponding data:uri ? i am a bit confused by all the loaders, thanks a lot

In generated style I get background: url([object Object]);, despite following the instructions. Node v4.2.1.

Latest version of file-loader is https://github.com/webpack-contrib/file-loader/blob/master/package.json#L3. We switch to ES modules syntax and it is allow to tree shake code, I would suggest to do it too:

• update file-loader to latest version, introduce esModule option (default value is false) and do minor release
• switch esModule to true and do major release

Version 2.7.2 of less just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As less is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Currently there is only documentation on how to apply supported parameters via require. Including the webpack versions of these would increase the verbosity of the documentation. I can submit a PR for this if it is something you desire!

Hi, I'm currently working on some project where we inline our svgs in the CSS (SCSS). At this moment I'm facing a situation where I have one SVG file per icon and I would like to have it in different colors.

While there is no easy way to style using CSS the SVG inlined as URL, I had an idea to change the color using SCSS variables. As this awesome guy did here: https://codepen.io/kevinweber/pen/dXWoRw.
However, I would like to have my svgs in separate files and use this loader for encoding instead of doing everything in SCSS.

So my idea is to use this loader before SCSS loader, and by configuration tell this loader to skip given phrase or skip scss variables or sth.

If you like this idea I can propose some PR.