Unanswered: Responsive Design - Using Ext.draw and vectors?
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.
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.
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?
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).
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?