Fork me on GitHub
#off-topic
<
2015-10-08
>
pupeno06:10:34

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

levitanong06:10:30

@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” />

pupeno06: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.

levitanong06:10:50

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?

pupeno06: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).

pupeno06: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.

pupeno06: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.

pupeno06: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.

pupeno06:10:04

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

levitanong06:10:51

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? https://css-tricks.com/svg-sprites-use-better-icon-fonts/ 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.

pupeno06: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?

levitanong06:10:04

React has a list of tags and attributes that it supports: http://facebook.github.io/react/docs/tags-and-attributes.html SVG use is not here.

pupeno06:10:38

Oh, good to know.

pupeno06:10:45

Thanks levitanong.

levitanong06:10:53

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

pupeno06:10:11

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

levitanong07:10:12

c’est la vie

alandipert12:10:07

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

pupeno12:10:23

oh geez, yes I am.

alandipert12:10:07

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

pupeno12:10:23

wow man, that was two lifetimes ago.

alandipert12:10:26

yeah, same for me

pupeno12:10:34

doing clojure now?

alandipert12:10:39

yup, and cljs. enjoying very much

alandipert12:10:36

on fedora though 😉

pupeno14:10:20

Oh, my case is worst… I have mac

pupeno17:10:26

Hey! I have some standards here!