Comments (4)
bensampaio
commented on July 29, 2024
Thank you for sharing!
What do you mean with the second point? "References with url(#id) do not work, which is a common practice for gradients."
I like your idea, but I need some time to look into it. The flow would be a bit different so I am not sure if it should be part of this module.
from external-svg-sprite-loader.
satazor
commented on July 29, 2024
@bensampaio Basically if you try to use this SVG in the sprite, the gradients won't work:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg 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"
viewBox="0 0 108 99" enable-background="new 0 0 108 99" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="36.4287" y1="33.9314" x2="15.1201" y2="53.1181" gradientTransform="matrix(1 0 0 -1 0 100)">
<stop offset="2.000000e-03" style="stop-color:#DD1A40 "/>
<stop offset="0.965" style="stop-color:#FD5557 "/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M7,55.9c0.5-0.5,1.2-0.8,2-0.8h34.5c0.8,0,1.5,0.3,2,0.8c0.3,0.3-19.3,19.3-19.3,19.3
S6.7,56.2,7,55.9z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-31.096" y1="654.444" x2="7.4089" y2="654.444" gradientTransform="matrix(6.123234e-17 1 1 -6.123234e-17 -618.194 87.042)">
<stop offset="2.000000e-03" style="stop-color:#E73F4F "/>
<stop offset="0.785" style="stop-color:#FC5457 "/>
<stop offset="0.965" style="stop-color:#FD5557 "/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M45.5,55.9c0.5,0.5,0.8,1.2,0.8,2v34.5c0,0.8-0.3,1.5-0.8,2c-0.3,0.3-19.3-19.3-19.3-19.3
S45.2,55.7,45.5,55.9z"/>
<path fill="#241B69 " d="M45.5,94.5c-0.5,0.5-1.2,0.8-2,0.8H9c-0.8,0-1.5-0.3-2-0.8c-0.3-0.3,19.3-19.3,19.3-19.3
S45.7,94.2,45.5,94.5z"/>
<path fill="#2932D2 " d="M7,94.5c-0.5-0.5-0.8-1.2-0.8-2V57.9c0-0.8,0.3-1.5,0.8-2c0.3-0.3,19.3,19.3,19.3,19.3S7.2,94.7,7,94.5z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="85.4835" y1="54.7145" x2="93.8828" y2="94.2333" gradientTransform="matrix(1 0 0 -1 0 100)">
<stop offset="2.000000e-03" style="stop-color:#E7244F "/>
<stop offset="0.621" style="stop-color:#FD5557 "/>
<stop offset="0.852" style="stop-color:#FD5557 "/>
</linearGradient>
<path fill="url(#SVGID_3_)" d="M70.3,39.6c3.8,3.1,8.6,5,13.9,5c12.1,0,22-9.8,22-22c0-6.1-2.5-11.6-6.4-15.5L70.3,39.6z"/>
<path fill="#241B69 " d="M70.3,39.6c-4.9-4-8.1-10.2-8.1-17c0-12.1,9.8-22,22-22C90.3,0.6,95.8,3,99.8,7L70.3,39.6z"/>
<g>
<path fill="#2932D2 " d="M55.3,36.2l-17.7-31c-0.9-1.6-3.2-1.6-4.1,0l-5.2,9.1L42.9,40h10.3C55.1,40,56.3,37.9,55.3,36.2z"/>
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="12.7544" y1="58.8326" x2="17.375" y2="96.4692" gradientTransform="matrix(1 0 0 -1 0 100)">
<stop offset="2.000000e-03" style="stop-color:#E7244F "/>
<stop offset="0.746" style="stop-color:#FD5557 "/>
</linearGradient>
<path fill="url(#SVGID_4_)" d="M23.1,5.2c-0.9-1.6-3.2-1.6-4.1,0l-17.7,31C0.4,37.9,1.5,40,3.4,40h10.3l14.6-25.7
C28.3,14.3,23.1,5.2,23.1,5.2z"/>
<path fill="#220D41 " d="M13.7,40H43L28.3,14.3L13.7,40z"/>
</g>
<path fill="#241B69 " d="M70.4,39.7c-4.9-4-8.1-10.2-8.1-17c0-12.1,9.8-22,22-22c6.1,0,11.6,2.5,15.5,6.4L70.4,39.7z"/>
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="1185.3656" y1="-751.712" x2="1232.1625" y2="-751.712" gradientTransform="matrix(-1 0 0 1 1292.864 827.412)">
<stop offset="2.000000e-03" style="stop-color:#E7244F "/>
<stop offset="0.785" style="stop-color:#FC5457 "/>
<stop offset="0.965" style="stop-color:#FD5557 "/>
</linearGradient>
<path fill="url(#SVGID_5_)" d="M84.1,96.2l23-36.8c1.1-1.9-0.2-4.2-2.4-4.2H63.5c-2.2,0-3.5,2.4-2.4,4.2L84.1,96.2z"/>
<path fill="#2932D2 " d="M73.2,78.7l-9,15.8c-0.5,0.8,0.1,1.7,1,1.7h18.9L73.2,78.7z"/>
</svg>
If you instead generate a sprite in <body> it does work, but you can't hide the sprite with display:none; you must do width:0;height:0;opacity:0 or similar. You may read more about this in http://stackoverflow.com/questions/24806913/how-can-i-refer-to-an-internal-gradient-definition-inside-an-svg-sprite-symbol
from external-svg-sprite-loader.
satazor
commented on July 29, 2024
Feel free to close if you don't want to do this in this module, no hard feelings :D
from external-svg-sprite-loader.
bensampaio
commented on July 29, 2024
@satazor sorry for the delay. I looked into this again and indeed I think it is out of the scope of this module. Let me know if you or someone creates a similar module in the future!
from external-svg-sprite-loader.
Related Issues (20)
- Clearer errors when trying to use the latest version with Webpack 4
- Duplicated IDs in icon sprite
- angular13 not generate sprite file
- It doesn't work with webpack 5 cache=filesystem
- SVGO Options HOT 4
- "TypeError: loaders is not iterable" after upgrade to v4 HOT 8
- Odd behavior when generating a manifest file HOT 8
- consistency with others loaders in manifest.json HOT 4
- Error when defining Rule.use as a function HOT 2
- Using `webpack-chain` breaks default options HOT 1
- It doesn't generate svg sprite HOT 17
- The module removes "fill" attribute when converting to symbol HOT 2
- Alternative (simpler) way to address the images inside the sprite (no math) HOT 1
- deprecation warning for chunk.files in webpack 5 HOT 1
- The sprite status is blocked: origin (webpack --mode production) HOT 23
- Can't run in storybook
- Deprecation warning for Chunk.modulesIterable
- Breaks with [email protected] HOT 3
- SvgStorePlugin fails if there are any other unrelated errors in the build HOT 1
- Support and compatibility with Webpack 4 regarding mini-css-extract-plugin HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from external-svg-sprite-loader.