1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    386
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Unanswered: Responsive Design - Using Ext.draw and vectors?

    Unanswered: Responsive Design - Using Ext.draw and vectors?


    Hi,

    I've yet to upgrade my app to v2.1 but have read with interest about Ext.draw and vector images...after inspecting some of the example code of the sencha vector logo it got me thinking...

    I'm trying to future proof my app as much as possible and ive been thinking about the possibility of creating a vector-based header and logo that would adapt to most screen sizes, whilst still retaining the quality. At the moment in my app I have a header that is flex 0.2 (a fixed header) and the main tanpanel part flex 0.8 in CSS I have a nice background and logo. I was thinking in Adobe illustrator you can export the logo as SVG and you get code that could be pasted to replace the example code used in the sencha vector logo example. My question is, would this work in theory, and what would the performance be like if I was to use vector images for my header?

    At the moment I also have a map component using leaflet but I have all the downloaded PNG tiles which amount to about 500mb. I was thinking about the possibility of using Ext.draw and again exporting a vector map from Illustrator that is zoomable but not as detailed. This could save many Megabytes if this worked when packaged.

    Any thoughts / tips on the above?

    Thanks

    :-)

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    7
    Answers
    1
    Vote Rating
    0
    markle776 is on a distinguished road

      0  

    Default SVG Example

    SVG Example


    Here is a tutorial on using SVG sprites to achieve resolution independence:
    http://coding.smashingmagazine.com/2...ence-with-svg/

    It also has a lot of useful links to other examples and svg reference material. I used it in a recent ST project where the original art was done in Adobe Illustrator. The size savings wasn't significant versus the standard resolution graphics but not having to produce and serve multiple sets of much larger graphics for retina displays was substantial.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    386
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Thanks

    Thanks


    Thanks for the link. I also saw this one:

    http://dev.sencha.com/deploy/ChartsD...aw/Sencha.html

    I would like to try something like the first link for the logo in my header, with a plain colour CSS background. Did you experience any problems with doing it? Did you have zooming in one of your panels with the svg element and what was the performance like?

    Thanks

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    7
    Answers
    1
    Vote Rating
    0
    markle776 is on a distinguished road

      0  

    Default SVG Sprites with ST2

    SVG Sprites with ST2


    I have an SVG sprite sheet with many more images than the four buttons in the sample I linked to in my reply. It is very responsive and looks flawless on the iPad3. I think the images are rasterized into browser work space when the SVG file is loaded--so applying them as a background to a component is just as fast as the PNGs. The big effort in converting from PNG sprites to SVG sprites was in learning how SVG gradients and filters worked since my images used a lot of Photoshop effects such as embossing, color fades, highlights, and drop shadows.

    I recommend using SVG sprites anywhere you know the target browsers are going to support the SVG filter effects (such as Safari and Chrome).

  5. #5
    Sencha User
    Join Date
    Dec 2012
    Posts
    1
    Vote Rating
    0
    joehenry is on a distinguished road

      0  

    Default


    I've run across performance issues as well, possibly due to the same issues (drop shadows, gradients, etc...). I'm using Adobe Illustrator for all the vector work and export. Can you provide details on how you optimized your styles and exports for performance, please?

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar