search

oliverfindl / vue-svg-inline-plugin

Vue plugin for inline replacement of SVG images with actual content of SVG files.
MIT License
33 stars 3 forks source link

Static building loads SVGs as data/image, not inline #8

Closed lopermo closed 3 years ago

lopermo commented 3 years ago

Hi, everything was working as expected until I built the project to host it in netlify. Once it was uploaded, the svgs stopped working inline and instead they were loaded through data/image base64.

Any way to configure this the right way? I'm using Nuxt, Vite and Tailwind JIT.

oliverfindl commented 3 years ago

Hello,

well... where to start... I use for all my production projects Webpack exclusively. Zero-config tools like Vue CLI or Vite are good only for Hello World like projects. It works, until it doesn't (or until you need some debugging or change something like disabling/modifying some rules, changing output project structure, adding custom service worker, etc.). Your issue is most probably Vite related (not sure about Nuxt.js). As you should know, Vite is using different approach for development server and production build (which is using Rollup as bundler). In your case, it handles it as regular image file, that get base64-inlined into document.

What are your options?

  1. Try to swap src to data-src.
  2. Try to use absolute paths to SVG files.
  3. Properly configure your bundler.
  4. Swap this plugin for something else.
  5. Swap your bundler (most probably not feasible solution at this stage).

As for points 1 and 2, it might work or it might not work. You need to test it yourself.

As for points 1, 2 and 3, if this solves your issue, you will most probably encounter another one, where path so SVG file will be different in development and production environment. Therefore you will need to have same folder structure in both environments or transform it via your bundler or wrap each src value into function and return different values for each environment.

As for point 3, you need to ensure, that your bundler won't process those SVG files as images and instead make it copy (and optionally optimize) them into correct folder structure of your built app.

If you manage to get rid of base64 encoded images and all of proposed solutions won't work for you, try to open browsers DevTools network tab and watch for SVG files requests. This might discover issues with incorrect paths to SVG files.

Please, let me know if this helps you to solve your issue.

Thanks.