I'm creating an application from scratch using angular2, SCSS and gulp.
I want to create high quality and responsive icons. Exploring the web I found the that there are 2 main techniques:
- image sprites
- fonts
- SVG sprites
As as far as I saw the way to go is SVG sprites, wich seems also to be very usefull also for accesibility.
Do you have experience on this? I'm thinking in automating the creating with gulp, with a folder of SVG's that creates a single sprite file and it's css file.
Basically I want to know:
- is this cross browser?
- can the svg sprites be responsive?
- after creating the SVG sprite, how is the best way of using it on the HTML?
Thanks so much in advance!
Related
I'm looking to automate css manipulation of responsive background images.
I currently have grunt set up in my project and am able to create responsive images and edit the html to show srcset, using their responsive images tasks.
The problem is that I don't have it set up for my css files and was wondering if anyone knows any working npms that can help me scan the images and add it as css media queries for creating responsive background images.
Any feedback or advice in the right direction will be greatly appreciated.
Best, Jonathan
I am able to generate my sprites images using SASS and Compass. Until here all work fine. The problem I am facing is I have no idea how to achieve the sprites be responsive.
I found this site that generates responsive sprites such I pretend but I don't know how to do it with using SASS and Compass. Is there some mixin that lets me do something like this?
I know there are tools to generate a sprite image and CSS from a collection of images.
But, is there a way to generate the CSS against an existing sprite image.
I was given a sprite image as-is with no CSS and am looking for a way to auto-generate the CSS instead of having to hand code it.
Like:
http://www.spritecow.com/ ?
http://www.spritebox.net/ ?
A simple Google search shows a lot of sites that will help you with this.
Is there a better way to change few images from a single file which was generated for CSS Sprites.
As I have a big image file which contains 50 small images and my css uses Sprites. Now I wants to chage 4 button's colors and size of s pointers. What will be the best possible way?
Use any CSS Sprites Generator like Spritemapper.
BTW, I create ZeroSprites which is an online sprites generator aimed at area minimization using VLSI floorplanning algorithm.
Edit your sprite file in a image software like Photoshop or GIMP.
Add new images on the bottom of the existing sprite file. That way, you can keep the existing positions of your sprites.
If you want to find to the css pointers, use the measuring tools in your image software.
Has anyone seen tooling, or even a process concept to generate css sprites from an existing website's images, and css during the build process?
I should think the steps would be:
walk an images directory
create a single sprite file from all the images in that directory
for each image
find any css classes using that image
update the css class to use the new sprite file
I'll using asp.net so something in msbuild would be awesome. However, I'm finding little out there even coming close.
You could use this http://spritegen.website-performance.org/ which is BSD licensed code. (see the download link on the right hand side.)
An automatic process like that only works well if you have a few simple images. There are several reasons to do the process manually:
Some image formats work better than others for sprites. If you try to make sprites out of JPEG images the compression will easily bleed from one image to another causing artifacts. Index color formats like GIF and 8-bit PNG has a limited number of colors, so if you put images with too varying color palettes together you will lose colors.
You may want to repeat an image horisontally or vertically, which makes it harder to combine the sprite image.
If the image is smaller than the element that you use it in, you would have to pad the image with transparent pixels. If the size of the element is dynamic in any way, the automatic process would not even know how much padding the image would need.