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.
 
From what Kier has shown me during development in private I get the impression they are layered, but not vectored. However, it's been over a year, it's quite possible that has changed by now. I know one isn't available for download via this site.
 
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.

As far as I know. no. I've made progress in replicating the xf images myself in a vectored format so that they can be scaled without quality loss and direct alterations can be made. Still a w.i.p though.
 
As far as I know. no. I've made progress in replicating the xf images myself in a vectored format so that they can be scaled without quality loss and direct alterations can be made. Still a w.i.p though.
Hmmm... would be very interested if something ever comes to fruition on that...

I'm wanting to put together a set of all SVG-based images for my XF setup so that the images scale well for things like the new iPad retina display.

Here's an example:
dps_logo.svgz


The compressed PNG version is about 8k... the compressed SVG version is 1.9k... but more importantly scales infinitely (zoom way in with your browser or something to see). It looks a little silly on a white background in this message since it wasn't made to be used on a white background.

This is what it looks like in use:
Image%202012.04.02%203:03:19%20PM.png


...and even zoomed way in (or resized internally for various mobile devices):
Image%202012.04.02%203:03:41%20PM.png


... all from a 1.9k image. :)
 
SVG has a few minor downsides, but it has my 100% support, for the last few years.
I think PNG is the middle ground for a lot of web images if you can't do it comfortably with CSS.

Your logo needs to be done by someone that knows something about typography by the way
Looks great though.
 
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. :)
 
For those curious, internally SVG images are just XML documents describing the colors, paths and filters. The image above is just this this (see below). So if you want to alter stuff like colors, blur radius, etc. you can just do it in a text editor if you really wanted.

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="192px" height="62px" viewBox="-6 -3 192 62">
<defs>
	<filter id="shadow" filterUnits="userSpaceOnUse" x="-5" y="-5" width="192" height="62">
		<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
		<feMerge>
			<feMergeNode in="blur"/>
			<feMergeNode in="SourceGraphic"/>
		</feMerge>
	</filter>
	<filter id="glow" filterUnits="userSpaceOnUse" x="-5" y="-5" width="192" height="62">
		<feGaussianBlur stdDeviation="20"/>
		<feOffset dx="0" dy="-25"/>
	</filter>
</defs>

<ellipse requiredFeatures="http://www.w3.org/TR/SVG11/feature#BasicFilter" cx="90" cy="-3" rx="70" ry="20" style="fill:#fff" filter="url(#glow)" />

<g filter="url(#shadow)">
	<path fill="#fff" d="M35.43,45.454c0,0.984-0.354,1.83-1.062,2.538c-0.708,0.708-1.554,1.062-2.538,1.062h-8.1
		c-0.6,0-0.9-0.3-0.9-0.9v-25.2c0-0.6,0.3-0.9,0.9-0.9h8.1c0.984,0,1.83,0.354,2.538,1.062c0.708,0.708,1.062,1.554,1.062,2.538
		V45.454z M30.03,46.354v-21.6c0-0.6-0.3-0.9-0.9-0.9c-0.6,0-0.9,0.301-0.9,0.9v21.6c0,0.601,0.3,0.9,0.9,0.9
		C29.729,47.254,30.03,46.954,30.03,46.354z"/>
	<path fill="#fff" d="M42.63,21.154c0,0.744-0.265,1.38-0.792,1.908c-0.528,0.528-1.165,0.792-1.908,0.792
		c-0.744,0-1.38-0.264-1.908-0.792c-0.528-0.527-0.792-1.164-0.792-1.908c0-0.744,0.264-1.38,0.792-1.908
		c0.527-0.527,1.164-0.792,1.908-0.792c0.744,0,1.38,0.265,1.908,0.792C42.365,19.774,42.63,20.41,42.63,21.154z M42.63,48.153
		c0,0.601-0.3,0.9-0.9,0.9h-3.6c-0.6,0-0.9-0.3-0.9-0.9v-21.6c0-0.6,0.3-0.9,0.9-0.9h3.6c0.6,0,0.9,0.3,0.9,0.9V48.153z"/>
	<path fill="#fff" d="M57.03,49.054c0,0.983-0.354,1.83-1.062,2.538c-0.708,0.708-1.554,1.062-2.538,1.062h-6.3
		c-0.6,0-0.9-0.3-0.9-0.899c0-0.601,0.3-0.9,0.9-0.9h3.6c0.6,0,0.9-0.3,0.9-0.899c0-0.601-0.3-0.9-0.9-0.9h-2.7
		c-0.984,0-1.831-0.354-2.538-1.062c-0.708-0.708-1.062-1.554-1.062-2.538v-16.2c0-0.983,0.354-1.83,1.062-2.538
		c0.708-0.708,1.554-1.062,2.538-1.062h8.1c0.6,0,0.9,0.3,0.9,0.9V49.054z M51.629,46.354v-18c0-0.6-0.3-0.9-0.9-0.9
		c-0.6,0-0.9,0.3-0.9,0.9v18c0,0.601,0.3,0.9,0.9,0.9C51.329,47.254,51.629,46.954,51.629,46.354z"/>
	<path fill="#fff" d="M64.229,21.154c0,0.744-0.265,1.38-0.792,1.908c-0.528,0.528-1.165,0.792-1.908,0.792
		c-0.744,0-1.38-0.264-1.908-0.792c-0.528-0.527-0.792-1.164-0.792-1.908c0-0.744,0.264-1.38,0.792-1.908
		c0.527-0.527,1.164-0.792,1.908-0.792c0.744,0,1.38,0.265,1.908,0.792C63.965,19.774,64.229,20.41,64.229,21.154z M64.229,48.153
		c0,0.601-0.3,0.9-0.9,0.9h-3.6c-0.6,0-0.9-0.3-0.9-0.9v-21.6c0-0.6,0.3-0.9,0.9-0.9h3.6c0.6,0,0.9,0.3,0.9,0.9V48.153z"/>
	<path fill="#fff" d="M78.629,48.153c0,0.601-0.301,0.9-0.9,0.9h-7.2c-0.6,0-0.9-0.3-0.9-0.9v-19.8c0-0.6-0.301-0.9-0.9-0.9h-1.8
		c-0.6,0-0.9-0.3-0.9-0.9c0-0.6,0.3-0.9,0.9-0.9h1.8c0.6,0,0.9-0.3,0.9-0.9v-1.8c0-0.6,0.3-0.9,0.9-0.9h3.6c0.6,0,0.9,0.3,0.9,0.9
		v1.8c0,0.6,0.3,0.9,0.9,0.9h1.8c0.6,0,0.9,0.3,0.9,0.9c0,0.6-0.301,0.9-0.9,0.9h-1.8c-0.6,0-0.9,0.3-0.9,0.9v18
		c0,0.601,0.3,0.9,0.9,0.9h1.8C78.329,47.254,78.629,47.554,78.629,48.153z"/>
	<path fill="#fff" d="M93.029,48.153c0,0.601-0.301,0.9-0.9,0.9h-8.1c-0.984,0-1.831-0.354-2.538-1.062
		c-0.708-0.708-1.062-1.554-1.062-2.538v-7.2c0-0.983,0.354-1.83,1.062-2.538c0.708-0.707,1.554-1.062,2.538-1.062h2.7
		c0.6,0,0.9-0.299,0.9-0.899v-5.4c0-0.6-0.3-0.9-0.9-0.9c-0.6,0-0.9,0.3-0.9,0.9v3.601c0,0.6-0.3,0.899-0.9,0.899h-3.6
		c-0.6,0-0.9-0.3-0.9-0.899v-2.7c0-0.983,0.354-1.83,1.062-2.538c0.708-0.708,1.554-1.062,2.538-1.062h5.4
		c0.984,0,1.83,0.354,2.538,1.062c0.708,0.708,1.062,1.555,1.062,2.538V48.153z M87.629,46.354v-9c0-0.6-0.3-0.899-0.9-0.899
		c-0.6,0-0.9,0.3-0.9,0.899v9c0,0.601,0.3,0.9,0.9,0.9C87.329,47.254,87.629,46.954,87.629,46.354z"/>
	<path fill="#fff" d="M100.229,48.153c0,0.601-0.301,0.9-0.9,0.9h-3.601c-0.6,0-0.899-0.3-0.899-0.9v-25.2
		c0-0.6,0.3-0.9,0.899-0.9h3.601c0.6,0,0.9,0.3,0.9,0.9V48.153z"/>
	<path fill="#fff" d="M129.028,41.854c0,0.984-0.354,1.831-1.062,2.538c-0.708,0.708-1.555,1.062-2.538,1.062h-2.7
		c-0.601,0-0.9,0.3-0.9,0.899v1.8c0,0.601-0.3,0.9-0.899,0.9h-3.601c-0.6,0-0.899-0.3-0.899-0.9v-25.2c0-0.6,0.3-0.9,0.899-0.9h8.101
		c0.983,0,1.83,0.354,2.538,1.062c0.707,0.708,1.062,1.554,1.062,2.538V41.854z M123.629,42.754v-18c0-0.6-0.301-0.9-0.9-0.9
		c-0.601,0-0.9,0.301-0.9,0.9v18c0,0.6,0.3,0.899,0.9,0.899C123.328,43.653,123.629,43.354,123.629,42.754z"/>
	<path fill="#fff" d="M143.428,45.454c0,0.984-0.354,1.83-1.062,2.538c-0.708,0.708-1.555,1.062-2.538,1.062h-5.4
		c-0.984,0-1.83-0.354-2.538-1.062s-1.062-1.554-1.062-2.538v-16.2c0-0.983,0.354-1.83,1.062-2.538
		c0.708-0.708,1.554-1.062,2.538-1.062h5.4c0.983,0,1.83,0.354,2.538,1.062c0.707,0.708,1.062,1.555,1.062,2.538V45.454z
		 M138.028,46.354v-18c0-0.6-0.301-0.9-0.9-0.9c-0.601,0-0.9,0.3-0.9,0.9v18c0,0.601,0.3,0.9,0.9,0.9
		C137.728,47.254,138.028,46.954,138.028,46.354z"/>
	<path fill="#fff" d="M150.628,21.154c0,0.744-0.264,1.38-0.792,1.908c-0.527,0.528-1.164,0.792-1.907,0.792
		c-0.744,0-1.381-0.264-1.908-0.792c-0.528-0.527-0.792-1.164-0.792-1.908c0-0.744,0.264-1.38,0.792-1.908
		c0.527-0.527,1.164-0.792,1.908-0.792c0.743,0,1.38,0.265,1.907,0.792C150.364,19.774,150.628,20.41,150.628,21.154z
		 M150.628,48.153c0,0.601-0.3,0.9-0.899,0.9h-3.601c-0.6,0-0.899-0.3-0.899-0.9v-21.6c0-0.6,0.3-0.9,0.899-0.9h3.601
		c0.6,0,0.899,0.3,0.899,0.9V48.153z"/>
	<path fill="#fff" d="M165.027,48.153c0,0.601-0.3,0.9-0.899,0.9h-3.601c-0.6,0-0.899-0.3-0.899-0.9v-19.8
		c0-0.6-0.301-0.9-0.9-0.9c-0.601,0-0.9,0.3-0.9,0.9v19.8c0,0.601-0.3,0.9-0.899,0.9h-3.601c-0.6,0-0.899-0.3-0.899-0.9v-21.6
		c0-0.6,0.3-0.9,0.899-0.9h8.101c0.983,0,1.83,0.354,2.538,1.062c0.707,0.708,1.062,1.555,1.062,2.538V48.153z"/>
	<path fill="#fff" d="M179.428,48.153c0,0.601-0.3,0.9-0.899,0.9h-7.2c-0.601,0-0.9-0.3-0.9-0.9v-19.8c0-0.6-0.3-0.9-0.899-0.9
		h-1.801c-0.6,0-0.899-0.3-0.899-0.9c0-0.6,0.3-0.9,0.899-0.9h1.801c0.6,0,0.899-0.3,0.899-0.9v-1.8c0-0.6,0.3-0.9,0.9-0.9h3.6
		c0.6,0,0.9,0.3,0.9,0.9v1.8c0,0.6,0.3,0.9,0.899,0.9h1.801c0.6,0,0.899,0.3,0.899,0.9c0,0.6-0.3,0.9-0.899,0.9h-1.801
		c-0.6,0-0.899,0.3-0.899,0.9v18c0,0.601,0.3,0.9,0.899,0.9h1.801C179.128,47.254,179.428,47.554,179.428,48.153z"/>
	<path fill="#fff" d="M10.473,20.981l0.496-10.495c0-1.478,1.351-2.675,3.02-2.675s3.021,1.198,3.021,2.675
		c0,1.477-1.352,2.674-3.021,2.674c-0.492,0-0.956-0.104-1.367-0.288l0,0l0.205,4.924c0.243-0.357,0.484-0.713,0.712-1.052
		c0.706-1.051,1.891-2.359,3.826-3.648c1.049-0.699,2.327-1.414,3.583-2.622l0.001-0.002c-1.256-1.208-2.533-1.922-3.583-2.621
		c-1.936-1.289-3.12-2.598-3.826-3.649C12.3,2.358,10.666,0.041,10.477,0l-0.002,0l0.001,0L9.98,10.495
		c0,1.477-1.351,2.674-3.02,2.674S3.94,11.972,3.94,10.495c0-1.478,1.352-2.675,3.021-2.675c0.492,0,0.956,0.104,1.367,0.29l0,0
		L8.123,3.187C7.879,3.542,7.639,3.898,7.411,4.237C6.705,5.287,5.52,6.596,3.584,7.885c-1.05,0.7-2.327,1.415-3.583,2.621L0,10.51
		c1.256,1.207,2.533,1.921,3.583,2.621c1.936,1.289,3.12,2.599,3.826,3.647C8.648,18.624,10.282,20.941,10.473,20.981L10.473,20.981
		L10.473,20.981L10.473,20.981z"/>
</g>
</svg>
 
I'd definitely look at getting a vector based image made if you are getting one from scratch. At the very least you can use Batik to convert it to a PNG and then you still have the vector based on as your source for future use.

For those that don't want to muck with installing Batik, I'll probably add a SVG -> PNG conversion tool to our tools section. Give it your SVG, it gives you back a PNG.

It's almost silly to NOT use SVG these days... It scales well (which mobile devices/iPad does extensively) AND ends up being about 4x SMALLER than an optimized PNG.
 
Looks like it's going to take you around two years to move from vB4 to xF.
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
 
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. ;)



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

I like the Marketplace stuff. Curious to see more of this and how it works.
So a user can place a product into a thread and put a "For Sale" button onto it? Like a shop-system?

Would you be willing to sell this as an Add-on?

Thanks!
 
Back
Top Bottom