1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Original XF Images

Discussion in 'Styling and Customization Questions' started by digitalpoint, Apr 2, 2012.

  1. 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.
     
  2. Floris

    Floris Guest

    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.
     
  3. Shelley

    Shelley Well-Known Member

    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.
     
  4. digitalpoint

    digitalpoint Well-Known Member

    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:
    [​IMG]

    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:
    [​IMG]

    ...and even zoomed way in (or resized internally for various mobile devices):
    [​IMG]

    ... all from a 1.9k image. :)
     
    EQnoble, Andy.N and Shelley like this.
  5. Floris

    Floris Guest

    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.
     
    Darkimmortal likes this.
  6. digitalpoint

    digitalpoint Well-Known Member

    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:
    [​IMG]

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

    digitalpoint Well-Known Member

    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>
     
    Shelley and (deleted member) like this.
  8. Andy.N

    Andy.N Well-Known Member

    Looking into this as well as we are going to get a new logo for the site.
     
  9. digitalpoint

    digitalpoint Well-Known Member

    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.
     
  10. DRE

    DRE Well-Known Member

    Looks like it's going to take you around two years to move from vB4 to xF.
     
  11. digitalpoint

    digitalpoint Well-Known Member

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

    [​IMG]

    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.

    [​IMG]
     
    vVv, SchmitzIT, gordy and 13 others like this.
  12. Floris

    Floris Guest

    I can tell you're converting your vB code to XF :) Great job
     
  13. DRE

    DRE Well-Known Member

    Dude wtf? That's amazing man! What the heck is draggable threads?
     
  14. Andy.N

    Andy.N Well-Known Member

    why stop there? Why don't we use svg for avatar and sprites?
     
  15. Reeve of Shinra

    Reeve of Shinra Well-Known Member

    DP has a post about it here somewhere, really really awesome and worth taking a look at for the sheer awesomeness of it.
     
  16. Digital Doctor

    Digital Doctor Well-Known Member

    Might be this ?

     
  17. digitalpoint

    digitalpoint Well-Known Member

    That's the vB version we use now.

    XF version:
     
  18. DRE

    DRE Well-Known Member

    Wow...
     
  19. Digital Doctor

    Digital Doctor Well-Known Member

    ooohh .... that XF DnD is sexy.

    DP: can you drag from the What's New ?
    :)
     
  20. erich37

    erich37 Well-Known Member

    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!
     

Share This Page