Original XF Images

digitalpoint

digitalpoint

Well-known member
Is there a graphics dev kit for the original XF images anywhere by chance?

I'm *hoping* they are vector based because I wanted to make a set of SVG versions.
 
Sort by date Sort by votes
digitalpoint said:
Nope... I'm pretty happy with the smiles. The SVG was really a little side project because I was bored. At some point I'll replace the normal XF sprite for icons with an SVG replacement.
Click to expand...
The importer news is excellent, Shawn. I can see many big boards benefit greatly from this.
As a small board, I'm more excited about your SVG tweaks, specially if you release them later ;)
 
Upvote 0 Downvote
digitalpoint said:
I changed Illustrator so a "nudge" is 0.1 px, so I fixed the sub-pixel alignment issues. I also dropped the icons I wasn't using... so I ended up with a SVG sprite with 11 icons weighing in at 16KB. Not too bad considering how good it looks on high rez screens/cell phones.
Click to expand...
New AI user here. I got a vector design for my logo and using AI, I tried to scale down the logo and export to SVG. Regardless of what I do, the file size is still the same.
What would you do to reduce the size of the SVG?
Thanks
 
Upvote 0 Downvote
For the most part there's not anything you can do to make the file size smaller other than make it simpler (less lines/objects, etc.) since you can scale it up as big as you want without changing the file size, the same works in reverse.

Inkscape and Illustrator CS6 are both pretty good at compressing down images. Also, is your final version an SVG or SVGZ?
 
Upvote 0 Downvote
digitalpoint said:
For the most part there's not anything you can do to make the file size smaller other than make it simpler (less lines/objects, etc.) since you can scale it up as big as you want without changing the file size, the same works in reverse.

Inkscape and Illustrator CS6 are both pretty good at compressing down images. Also, is your final version an SVG or SVGZ?
Click to expand...
Yeap, I see. It defeats the purpose of using SVG if a 20x30 image is 200KB ;)
I think it has too much detail in it.
I save it as SVG 1.1 profile since the svgz is 60KB and the server will compress it, as well as not many browsers can read svgz.

Here is what it looks like in png format.
logo.og.webp
 
Upvote 0 Downvote
Everything should be able to read SVGZ... Firefox is the only one I know of that can't just display it as a stand-alone, but it can just fine when used on a webpage. What browser are you seeing that can't display SVGZ?

And yeah... if you are trying to do something pretty small that is very detailed (like the map of the continents), it may not be worth it since it's going to be the same file size if it's 20x20 or 4000x4000...
 
Upvote 0 Downvote
digitalpoint said:
Yep... right now it was mostly a quick proof of concept. I do need to get in and do some sub-pixel adjustments... but that's easy enough. Just didn't feel like doing it for all 48 icons since I'm going to reduce that sprite file down to just ones I'm using first.


Well, if you want to get crazy, you could do the editor sprite...
icons.png


I'll probably not bother with that one myself, but I'll most likely redo the XF UI sprite...

xenforo-ui-sprite.png
Click to expand...
Would you by chance mind if someone was to use these in a free open source project?
 
Upvote 0 Downvote
digitalpoint said:
Well right... SVG does have some downsides... for example Chrome and Opera more or less have full-support... but other browsers don't. Firefox supports some, but not all filters (in Firefox the dropshadowing shows, but not the white glow from above). Safari supports no filters, so it looks very "plain" in Safari (but at least it still works):

Safari:
Image%202012.04.02%203:22:46%20PM.png


If you stay away from using SVG filters, it's pretty well supported (even IE8 and higher are fine)... but even if you DO use filters, the images still work, just "dumbed down" as you can see from the Safari screenshot.

My idea is to create a full set of SVG images, and then have a little PHP script that serves the images. If it's an old browser with terrible support for SVG, it will automatically serve up a PNG version instead (there is a command line utility called Batik that will convert SVGs into PNGs... even with all the SVG filters and such). So I just create one SVG, and my system will serve up whatever image format it sees best fit for the user.

And yes... of course whoever is making the graphics would need to be knowledgeable with vector based images. And if you get into the advanced stuff like SVG filters, they would need to be even more knowledgable. :)
Click to expand...
Just a side note... the new version of Safari seems to be supporting the SVG filters now. :)

From new version of Safari (vs. old in the quoted post).

Image%202012.09.18%2011:12:43%20AM.png

Will be interested to see if that change carries over to the forthcoming version of Safari in iOS6.
 
Upvote 0 Downvote
digitalpoint said:
I ended up doing some CSS trickery to allow the smiles to overflow the vertical bounds of the line it's on without pushing the line itself down... Since the little antennas on my alien smiles don't really matter, and at the same time I can make them a little bigger without making the line spacing look dumb...

Image%202012.06.15%205:05:22%20PM.png


And zoomed...

Image%202012.06.15%205:06:03%20PM.png
Click to expand...
Come on and release it already ;)
 
Upvote 0 Downvote
Andy.N said:
Yah. If I know how to get dozens of smilies into a small svg spritesheet like Shawn, I wouldn't be here, would I? ;)
Click to expand...

Apologies, I was thinking you wanted a PNG sprite sheet; AFAIK you can't have a sprite "sheet" of SVG images as they're not actually vector images, they are essentially like XML files at their core and you can't "sheet" the drawing instructions - which is why they are references individually in the HTML.

I could be completely wrong on this, of course, but that is my understanding of how SVGs are implemented in a site.
 
Upvote 0 Downvote
Andy.N said:
Svg smilies?
Click to expand...
Would be a bit silly to have spent so much time on it if I'm the first to be able to use them. If I made them *for* release, sure... But I spent a lot of time on them for my site. So I get to use them first at the very least (which I haven't done yet). ;)

Clickfinity said:
Apologies, I was thinking you wanted a PNG sprite sheet; AFAIK you can't have a sprite "sheet" of SVG images as they're not actually vector images, they are essentially like XML files at their core and you can't "sheet" the drawing instructions - which is why they are references individually in the HTML.

I could be completely wrong on this, of course, but that is my understanding of how SVGs are implemented in a site.
Click to expand...
Yep... Completely wrong. A sprite does not mean raster images. You can use vector or raster images as an image sprite. Also, SVGs *are* vector images (what do you think the V in SVG stands for?)
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

K
  • Suggestion Suggestion
Add an option to keep original uploaded images
Replies
0
Views
347
Kirby
K
A
Sharing tips on using Exiftool for existing forum images
Replies
0
Views
28
Alvin63
A
frm
  • Suggestion Suggestion
Retain EXIF data on optimized/processed images
Replies
14
Views
246
Wildcat Media
Wildcat Media
S
  • Question Question
MG 2.2 Maximise MG embedded images
Replies
0
Views
466
SNSSO
S
zeus3005
  • Question Question
RM 2.2 Storing files in S3 with their original name and extension
Replies
1
Views
2K
Jim Boy
Jim Boy
Back
Top Bottom