Questions tagged [svg-sprite]
61 questions
1
vote
1 answer
SVG sprites: per-instance preserveAspectRatio
Is there any way to set the value of preserveAspectRatio for SVG sprites on a per-instance basis using CSS, HTML, or some other method (besides JavaScript)?
For example (none of these appear to work):
cantera
- 24,479
- 25
- 95
- 138
1
vote
1 answer
Exclude SVG from gulp-svg-sprite build process
I'm currently building an SVG Icon system using gulp-svg-sprite and have run into a situation where I need to exclude some icons from the build process.
Is there a way to EXCLUDE an SVG from running through these 2 pipes? Somehow I need to get the…
Ryan Belisle
- 11
- 1
1
vote
1 answer
How can i make an SVG-sprite tile properly in a CSS background?
I'm trying to use part of an SVG as a tiling background. However I'm having great problems making it work properly.
I think a picture will illustrate the problem best:
demonstration picture
This is my CSS:
body {
background:…
Jonathan SI
- 33
- 5
1
vote
1 answer
Coloured round border around pseudo content with image sprite?
Im using an image sprite with transparency which im applying to pseudo content. I need a coloured rounder border around the image.
This is what I have so far:
http://codepen.io/anon/pen/bpmGaz
.icon:after {
content: "";
…
Evanss
- 23,390
- 94
- 282
- 505
0
votes
4 answers
Use SVG sprite as mouse cursor
I have an SVG sprite:
0
votes
0 answers
How to replace the value of the fill attribute in the svg image code with any other custom value in the gulp-svg-sprite plugin
For example i want replace fill attribute fill="#87B0EE" in svg image code that way that i can have access to it and can change it states via css variables. Like this: fill="var(--color,#87B0EE)". That because shadow-root not allow have access to…
Rinatster
- 25
- 4
0
votes
1 answer
SVG gradients not getting rendered when using it from external SVG-sprite file
The gradients only functions properly when I include the svg sprite as code in the same file which defeats the purpose of having an svg sprite in the first place. I read from a different post from 3 years ago where someone said its bugged but surely…
Squaid Ink Arts
- 11
- 3
0
votes
1 answer
SVG stack sprite not reducing number of sent requests
I have about 30 colorful .SVG icons, for simplicity and reducing number of request sent to server, I created an integrated .SVG like this :
0
votes
0 answers
How to run Javascript
I have a working Gulp script that I use to create my SVG sprites along with a preview page. But now I want to enrich the preview page, more precisely each icon in it, with information that I have in a separate json file. But I don't have any idea…
Manuel Kobloch
- 37
- 1
- 3
0
votes
0 answers
SVG Sprite in css declared background image
I have a SVG sprite file with several images.
For the testing purposes, I narrowed it down to a single image.
When I declare the image as an instance in the html body with a reference to the image id in the sprite file, the image appears correctly.…
Ben Shomer
- 36
- 4
0
votes
0 answers
SVG Sprite Resource Loading Performance
I have recently switched all of my icons on my site to SVG icons/images. I am serving all of the SVGs from one sprite file. I am using Chrome Dev Tools Performance to try to optimize loading of resources. I was very surprised to see that the…
RJW
- 21
- 4
0
votes
0 answers
How to display SVG Sprite Icons in HTML file while working locally?
I am using SVG icons (from IcoMoon), the problem is I can't see the icons while working locally, but when I upload the page online it works fine.
SVG Icons
Pixel Potter
- 51
- 1
- 8
0
votes
1 answer
Blank icons (SVG sprite) in Angular 8
I've generated SVG spite using icomoon, to provide soft usability I've created a component for it, and realized that this is well enough practice until this time.
Some icons just become blank. And I'm still can't find a reason which causes such…
George Reznichenko
- 11
- 4
0
votes
1 answer
How to change import path of svg sprite
svg-sprite to generate icons in my project. But I have one problem with configuration. I want to change import path in scss file as I use separate task to compile scss. I ve set the the svg-sprite config something like this:
mode: {
view: { //…
youngster
- 195
- 1
- 12