Fork me on GitHub
Pablo Fernandez06:10:34

@levitanong: I tried, but the use of the SVGs was not obvious to me.


@pupeno You download a folder with the SVGs in them, and then you just link to those SVGs as images. <img src=“path/to/svg” />

Pablo Fernandez06:10:00

That’s not how they were used in the demo.html they shipped. That usage is not talking advantage of spriting. And I’m not sure with img instead of use there would be a difference, but it wasn’t immediately obvious to me how to control the size of the svg and still be responsive.


There are many ways to use SVGs simple_smile You can use the SVGs in the same way that they do in demo.html. I personally don’t use it, because React.js doesn’t support it. With img you can just normally set the height and width, as with any html element. What do you mean when you say that it isn’t taking advantage of spriting? And what do you mean when you say you want to control the size and keeping it responsive?

Pablo Fernandez06:10:54

Spriting is when you have one file contain all the images so they can be download in one HTTP request and then you display only one part (a sprite) of that file. Using img will download each svg separately (this is not true for svg, it’s true for all types of imgs).

Pablo Fernandez06:10:55

I can put a font icon in a bootstrap navbar and I’ll now it’ll scale properly with the navbar. I don’t even know what the size of the navbar is. I don’t know how to achieve the same with SVGs.

Pablo Fernandez06:10:19

To be clear: I don’t want to manage to get SVGs to appear on my screen. I can do that, that’s easy. What I want is a good workflow. For example, I know bootstrap and font awesome are being used by several thousands of apps and many developers are testing it against many different browser versions and platforms.

Pablo Fernandez06:10:45

Making an SVG appear on my screen is not the same as making an SVG appear on every screen out there, which is what I care about.

Pablo Fernandez06:10:04

Looking at how to use SVG, there are many ways and they all seem to have caveats that are not small.


Ah, now I understand what you mean. I’m sure you’ve done your google-fu, but just in case you missed it, have you checked this guide out? In this article, the author details the use of <use>, and a workaround for IE. This is the method I wanted to use way back, but couldn’t because React didn’t support <use>. If you aren’t using React, maybe you could try it.

Pablo Fernandez06:10:57

Yeah, I read that. That’s how I got to icomoon. The method described there seems to depend on grunt and when it describes icomoon it doesn’t specify much. And yes, I’m using react, what do you mean it doesn’t support use?


React has a list of tags and attributes that it supports: SVG use is not here.

Pablo Fernandez06:10:38

Oh, good to know.

Pablo Fernandez06:10:45

Thanks levitanong.


Regrettably, we still have yet to solve the SVG problem 😛 You’re welcome, @pupeno.

Pablo Fernandez06:10:11

Yeah, I’ll just use font awesome and move on.


c’est la vie


@pupeno: are you the same pupeno who used to work on ark linux?

Pablo Fernandez12:10:23

oh geez, yes I am.


cool, nice to see you in here simple_smile i used to use it and helped a little with the website.. thought i remembered your handle from the mailing list

Pablo Fernandez12:10:23

wow man, that was two lifetimes ago.


yeah, same for me

Pablo Fernandez12:10:34

doing clojure now?


yup, and cljs. enjoying very much


on fedora though 😉

Pablo Fernandez14:10:20

Oh, my case is worst… I have mac

Pablo Fernandez17:10:26

Hey! I have some standards here!