Original XF Images

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.
 
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?)

I see, so they're not raster images (that would be PNGs?) and they are vector (okay, got that the wrong way round) - so can you sprite "sheet" them?
 
Yes... you can. .svg and .svgz images can be used just like any other image file (including having them be background images which is how image sprites work).

I think I know why you think maybe you can't... because HTML5 supports inline SVG rendering with the <svg> tag (where the XML for the SVG rendering right in the page source rather than an image file). In that case, you couldn't (and wouldn't *want* to) use an inline SVG definition as a image sprite sheet.

If you look at this post where I posted the image of the SVG logo I'm using, you can see it's actually a sprite itself (I made an SVG version of the XF style close button that is on the same image).

http://xenforo.com/community/threads/original-xf-images.29966/#post-343481

The closer image is within the same image as the logo, but as you can see when you zoom, it's pretty clearly an SVG since it scales infinitely and only adds ~125 bytes to the logo image.

Image%202012.12.12%201:51:02%20PM.png
 
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). ;)
Given that you haven't gone XF yourself, my release request was more a comment to revive this discussion ;)
I dream in svg, retina and I don't know anyone else is doing this but you.
 
Has anyone noticed how awesome Illustrator CS6 is at taking raster images and turning them into vector images with it's trace tool (and then you can just save as an SVG)?

Got example, it took about 10 seconds to turn a JPG of the "y u no" meme guy into a scalable SVG vector...

Original (raster JPG):
y-u-no-guy.jpg


Turned into vector SVG with trace tool:
yuno.svgz


I didn't keep 100% of the detail for sake of file size, but you can if you want.
 
  • Like
Reactions: R_A
Nah... just because I'm thinking about stuff I want to do, much of it (like SVG images) aren't a hold up since they can be done after the fact.

That being said, it's going to be a quite impressive installation of XF I think. ;)

Image%202012.04.02%205:59:48%20PM.png


Lately I've been finishing up a full-blown marketplace auction system, with ACTUAL payment processing between members... a feedback system that allows people to ONLY leave feedback if a transaction actually took place, etc.

Image%202012.03.30%203:40:35%20AM.png
Hope to see this addons here @ XF.
 
  • Like
Reactions: R_A
I tried replacing my logo.png with an svg and it looks great...except in IE.
It's IE10, and I have no debug tools, so I can't see what is going on with it.
Any ideas, please?
Firefox:
temp1.webp
IE10:
temp2.webp

[Edit: Fixed it. The css and js which changes the logo size when the header changes, wasn't specifying the logo width. Seems logical that we should just define the width and let the browser determine the right width, but as usual, IE lets us down. Specifying the width fixes it.]
 
Last edited:
So I started messing with replacing the default Tweet/Google+/Like buttons last night... mainly because the Twitter and Facebook buttons look like garbage on retina screens (Google at least uses SVG for their logo). In doing so, I realized those 3 buttons cause 20 HTTP requests (no joke) totaling 116KB.

So yeah... decided to really rework them with my own stuff...

Takes 1 HTTP request for everything (CSS, images, etc. all embedded in the one request), all images are SVG-based (so they scale properly), consolidated the share totals into a single "total shares" number.

So yeah... retina support, requires 1 HTTP request totaling 2KB, and takes less screen real estate than the default buttons.

For example here: https://forums.digitalpoint.com/

The new setup looks like this:

upload_2014-2-6_15-13-49.webp

Zoomed way in (for example retina displays)...

upload_2014-2-6_15-14-39.webp
 
So I started messing with replacing the default Tweet/Google+/Like buttons last night... mainly because the Twitter and Facebook buttons look like garbage on retina screens (Google at least uses SVG for their logo). In doing so, I realized those 3 buttons cause 20 HTTP requests (no joke) totaling 116KB.

So yeah... decided to really rework them with my own stuff...

Takes 1 HTTP request for everything (CSS, images, etc. all embedded in the one request), all images are SVG-based (so they scale properly), consolidated the share totals into a single "total shares" number.

So yeah... retina support, requires 1 HTTP request totaling 2KB, and takes less screen real estate than the default buttons.

For example here: https://forums.digitalpoint.com/

The new setup looks like this:

View attachment 66673

Zoomed way in (for example retina displays)...

View attachment 66674

Share? :D
 
Rolled it out live on the site... sure makes the site load a lot faster without the slow default social buttons.
Tested it on our site to replace a bunch of Addthis buttons. Couple questions
1) Put it on my page and it shows a share count of 770 while the XF stock FB share button at the bottom breadcrumb shows over 1000 FB likes. What the share count shows?
2) How do I put some bottom padding to this?
3) How are we replacing all the XF share buttons with this?
 
Last edited:
The link when you hover over is too much for me. I can see a lot of accidental clicks to your site while they are trying to share. Nice job though. Looks great.
 
  • Like
Reactions: rdn
The link when you hover over is too much for me. I can see a lot of accidental clicks to your site while they are trying to share. Nice job though. Looks great.
Oh yeah... it actually isn't there if someone is a premium member and they have verified their domain (I think both of you guys are already premium, so...)

Verify domain(s) here and within 5 minutes (it has a 5 minute cache on the domain check) there will be no more hover link thing.
https://forums.digitalpoint.com/marketplace/branding-removal

Whole thing was built so quick, I forgot to mention things like that. :)

At the end of the day though, it's a fairly decent amount of server resources on our end (between serving JavaScript up for every page view for every site using it as well as making all the backend API calls and storing them on our end so they are cached to get the share numbers).

Certainly open to ideas to make the link less obtrusive for non-premiums... UI/design isn't my strong-point. But really shouldn't be in this thread... now that it's totally off topic.
 
Top Bottom