Ye Olde Inn

Trying to replace these with SVGs using CSS…

iKarith wrote:Trying to replace these with SVGs using CSS…

I used to have a tool for doing this quickly but lost it and couldn't find it. Ultimately I just had to dig up a URL encoder and call it good.

Now that I have the process for this down, I think I will do it with the others as well. I might want to simplify the SVGs a little though, even scour'd, that barbarian SVG is 7.4k and it's now just making every page 7.4k larger. Multiply by the entire list of smilies. I mean the Inn's pages are a lot lighter than faceyspace or similar, and even with all these SVGs added all I have to do is close my dev tools and it'll stop being a major drain … but still, we don't need quite that level of detail in an icon that small.

For the curious, it's done like this:

Code: Select all

mg[alt=":barbarian:"] {
    display: inline-block;
    box-sizing: border-box;
    width: 1.66em;
    height: 1.5em;
    padding-left: 1.66em;
    background-size: 1.66em 1.5em;
    background-image: url("data:image/svg+xml;utf8,<URLENCODED SVG HERE>");
}


I might be able to rescale everything to reduce the complexity of the CSS, but … I'd rather reduce the complexity of the SVGs.

Note, this embedded SVG thing doesn't require my crazy dark mode large font setup. I sized stuff in em. Scaled to 1.5em in this case to fit what the existing glyphs seem to use, but in this case I could have made it 1.11 and 1.0 instead of 1.66 and 1.5 and it'd be exactly the size of the font.

I do intend to put all of the quest icons in, and the dice, and the smilies using twimoji's glyphs where possible. The result should be usable by anyone using Stylus if I properly fill it in as a usercss and put it on gitlab or something. Which I'll probably do!

Well, here's my progress so far:



I wanted to get the process down using svgs I had or could easily make. The scaling for Mr. Green didn't quite work out, he's a little too large for the bounding box, but I think that's all right in his case. He's larger than both life and bounding boxes. I could fix it, but I decided explicitly not to. Made the 2 cents myself because I couldn't quickly find one and it was faster to actually edit them in Inkscape and scour (and re-scour by hand) the generated SVG than to do anything else. Should someone extract it and use elsewhere, I don't care.

I used the HeroScribe icons for this, which are 18x20 and considered the height to be 1em, making the width 1.11. I can make the width 1.11 and shrink the height a little if people think it should be done.

Wanted: combat dice faces. There's a couple of high enough resolution ones online that I should be able to create them easily enough, but if someone else has done the work… I'll be using twimoji (Twitter's emoji font) to get the others, where they exist.

Comments? Feedback?

And then there were 4… Left, that is. The three faces of the combat dice and I have a beer, an orc, and I need to make an orc with a beer… But tonight isn't the night for that. Side effects. *sigh*



I redid Mr. Green to match the style of the others. I'm still not sure the gargoyle works either, his circle feels a little puny. I decided to use US green for the greenskins, but went with UK black and white for the undead, obviously. This left what to do with the chaos warrior and gargoyle icons. I went with red because chaos warrior armor is typically red in Warhammer proper, and the gargoyle is depicted as red in a lot of HQ's own artwork—that which does not make him gray, at least. But I'm not sure I like my red anyway.

I do like how the red dice came out.

Feedback very much wanted!

The smilies are looking good!

Why not gray for the Chaos Warrior and Gargoyle? Also, the Gargoyle circle needs enlarging, in my opinion. Can you upside the whole image?

The gems look like they could use some more definition--they appear too flat, in my opinion.

The Red ones are the "hero" variant (see the gallery).

Daedalus wrote:The smilies are looking good!

Why not gray for the Chaos Warrior and Gargoyle? Also, the Gargoyle circle needs enlarging, in my opinion. Can you upside the whole image?

The gems look like they could use some more definition--they appear too flat, in my opinion.

Gray ended up looking washed out and low-contrast. I said "screw it, I'll make them some other color for now and fix it later…" Picked red, since Chaos Warriors would normally be depicted as having red armor outside of HeroQuest.

The conversion to SVG lost some details from the eps of what the exact intended sizes of these relative to each other should have been and it was kind of a batch job. Also in the "I'll fix it later" category. Except I haven't really gone back to play with it more in awhile. I ultimately decided to make be U+1F600 just … green … but I haven't gone back and made the alteration to him yet, so he's yellow currently.

You can't put that character directly into a message in this version of phpBB because it predates that being a thing and the DB pukes on it, so here's U+1F600 or what I like to call [emoji key]grin[space][space][enter]:



Friendly fellow, ain't he?

That is one big-time happy face.

I was wondering if the gray was a clarity issue. My fix would be to go to b+w for the CW and Gargoyle, but then you gotta go for some kind of yellowish-beige for the undead and that also may have issues.

I think the resized Mr. Green turned out pretty good, though!

It's not that big when I see it, obviously, it's the same size as all the others. It's just that I can't drop SVG in the middle of a post and the forum rejects UTF-8 characters that cannot be converted to what it's used to.