DG SVG.book
Contents
1. Use GZIP compression to produce compressed SVG files GZIP compression available with various freeware and shareware utilities is the standard compression for SVG called SVGZ Depending on the size of the file and whether there are embedded raster images in the file up to 90 compression can be achieved Links and references For more information about SVG www w3 org Graphics SVG the official SVG specification web site www svg org a community web site about SVG www adobe com svg Adobe SVG zone www ikivo com animator mobile SVG content creation tool www beatware com products md html mobile SVG content creation tool2. G705 S700 W660 W700 W710 W800 Hazel Jalou Z500 W810 W830 W850 W880 K630 K660 K850 W900 Z520 Z525 Z530 Z550 Naite Z558 Z610 Z710 Pureness T700 T707 T715 V640 TW508 W705 W715 W760 W890 W902 Yari W910 W980 W995 Z750 Z770 Z780 Zylo SVGT 1 1 e e e e e Links e e D e Opacity and gradients e D e addition to SVGT 1 1 Anti aliasing e e System fonts bitmaps e e SVGT 1 2 e SVG Tiny version 1 1 SVGT 1 1 is the standard SVG version for mobile phones Links lets the user interact with the image to activate hyperlinks to other Web resources It is possible to use the SVG image as a Web page Opacity and Gradients are additional SVG features not supported in the SVGT 1 1 specificaton but in the 1 2 version Sometimes SVGT 1 1 with extended support for opacity and gradients is referred to as SVGT 1 1 Anti aliasing is a feature in the SVG player in the phone It removes jagged lines and makes objects look smoother System fonts mean that the SVG author is able to use the system fonts of the phone to write text in images Without this feature fonts must be provided as part of the SVG image so called SVG fonts SVG Creating static SVGT content General tips for creating static SVGT content Generally when creating SVGT content text objects should be converted to paths Font support on phones is varied and some phones do not support SVG text at all see table above To
3. Synchronised Multimedia Integration Language SMIL ECMA script javascript and the Document Object Model DOM to provide a powerful common platform able to span everything from desktop web applications to embedded devices as well as phones from Sony Ericsson As a text format open standard SVG is easily scripted and can be authored and dynamically generated using a number of popular design and development tools The SVG specification itself is regulated by the World Wide Web Consortium W3C and includes members from leading companies such as Adobe Apple Canon Ericsson HP Nokia Sun and lkivo SVG comes in three profiles Full for desktop applications Basic for portable devices like PDAs and Tiny for mobile phones The mobile subset of the SVG specification called SVGT or SVG Tiny has been adopted by the 3GPP OMA Open Mobile Alliance and other leading mobile standardisation bodies The most notable difference between SVG Tiny and the full SVG profile is the limited interactivity support The primary benefit of vector based graphics over bitmap images such as GIF and JPEG is that vector based images can be scaled without the loss of image quality SVG content can be used for animated cartoons and interactive graphics Another benefit of SVG is that vector based images are more compact than bitmap images This is because they are built up by geometrical shapes that are described mathematically rather than by bitmaps SVG image
4. Z550c Z550a Z558i Z558c Z610i Z110i Z710c Z750i Z770i Z780i Z780a Z800i Sony Ericsson Zylo W20 Sony Ericsson Zylo W20i SVG SVG Trademarksand acknowledgements GreenHeart Aino BeJoo Jalou Naite Pureness Sony Ericsson Cedar Sony Ericsson Elm Sony Ericsson Hazel Sony Ericsson Zylo Xperia and Yari are trademarks or registered trademarks of Sony Ericsson Mobile Communications AB Microsoft and Microsoft Windows are either registered trademarks or trademarks of Microsoft Corporation in the Unites States and or other countries Mac OS is a trademark of Apple Computer Inc registered in the U S and other countries Adobe Adobe Golive Adobe Illustrator and Adobe Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and or other countries Other product and company names mentioned herein may be the trademarks of their respective owners Document history Change history 2005 04 11 Version R1A First version published on Sony Ericsson Developer World 2005 05 04 Version R1B First revised version 2005 11 07 Version R2A Second version 2006 01 05 Version R3A Third version 2006 02 13 Version R4A Fourth version 2006 02 28 Version R5A Fifth version 2006 04 04 Version R6A Sixth version 2006 05 19 Version R7A Seventh version 2006 06 19 Version R8A Eighth version 2006 08 22 Version R9A Ninth version 2006 09 28 Version R10A 10th version 2007 01 08 Vers
5. ensure that text is visible and displayed in the font face that you desire on the widest range of SVG enabled phones you should convert your text objects to paths Note that although SVG emphasises vector content raster images such as GIFs JPEGs and PNGs are supported In some cases using a raster object may be a more optimal solution than using a vector object The only drawback is that the image will be less scalable For more about using raster content see the section below on General SVG optimisation tips To keep resources as localised as possible rasterised content should always be embedded instead of referenced by file name thus avoiding problems for the rendering software to find referenced files Raster images to embed should be optimised by resizing the image and using an optimisation program such as the Adobe Photoshop Save for Web function and then place the image into the SVG graphic tool used The embed images option should be selected when saving the SVG There are several ways to convert SVG Full content to SVG Tiny For example the following methods are useful e Generate SVG Tiny content with SVGmaker Tiny e Open the illustration in Adobe Illustrator CS2 and save it using the SVG Tiny 1 1 1 17 or 1 2 DTD e Open or insert the content into Ikivo Animator to convert or remove non Tiny compliant content and save it as SVG Tiny 1 1 or 1 2 see more about the lkivo Animator below e Open the file in A
6. web content and viewing of downloaded and locally stored SVG files Aino C510 C702 C901 C902 C903 C905 Cedar Elm G502 G705 Hazel Jalou K510 K530 K550 K600 K610 K630 K660 K750 K770 K790 K800 K810 K850 Naite Pureness S500 T650 T700 T707 T715 V600 V640 W200 W300 W508 W550 W580 W595 W600 W610 W660 W700 W705 W710 W715 W760 W800 W810 W830 W850 W880 W890 W900 W902 W910 W980 W995 Yari 2520 Z525 Z530 Z550 Z558 Z610 Z710 Z750 Z770 Z780 and Zylo series allow use of SVGT content as wallpaper images selected in the display settings menu Aino C510 C702 C901 C902 C903 C905 Cedar Elm G502 G705 Hazel Jalou K510 K530 K550 K600 K610 K630 K660 K750 K770 K790 K800 K810 K850 Naite Pureness S500 T650 T700 T707 T715 V600 V640 W200 W300 W508 W580 W595 W610 W660 W700 W705 W710 W715 W760 W800 W810 W830 W850 W880 W890 W902 W910 W980 W995 Yari Z520 Z525 Z530 Z550 Z558 Z610 Z710 Z750 Z770 Z780 and Zylo also allow use of SVGT content in the Standby wallpaper element of Sony Ericsson themes SVG SVG The evolution of SVG features support for different Sony Ericsson phone series is described below F500 V800 Z800 K510 K530 K550 K600 K610 Aino C510 K300 K750 K770 K790 K800 K810 C702 C901 C902 K500 S500 T650 V600 W200 W300 C903 C905 Cedar K700 W550 W580 W600 W610 Elm G502
7. Sony Ericsson Elm J10 Sony Ericsson Elm J10i2 F500i G502 G502c G705 G705u Sony Ericsson Hazel J20 Sony Ericsson Hazel J20i Jalou F100i BeJoo F100i K300i K300c K300a K500i K500c K506c K508i K508c K510i K510c K530i K550i K550c K600i K608i K610i K610c K610im K618i K630i K660i K700i K700c K750i K750c D750i K770i Generic names Series K790 K800 K810 K850 Naite Pureness 500 700 T650 T700 T707 T715 V600 V640 V800 W200 W300 W508 W550 W580 W595 W600 W610 W660 W705 W710 W715 W760 W800 W810 W830 Sony Ericsson phones K790i K790c K790a K800i K800c K810i K818c K850i K858c Naite J105i Naite J105a Xperia Pureness X5 Xperia Pureness X5i S500i S500c S700i S700c S710a T650i T668c T700 T707 T707a T715 T715a V600i V640i V800 Vodafone 802SE W200i W200c W300i W300c W508 W508c W508a W518a W550i W550c W580i W580c W595 W595s W600i W610i W610c W660i W705 W705u W710i W710c W715 W760i W760c W800i W800c W810i W810c W830i W830c SVG Generic names Series W850 W880 W890 W900 W902 W910 W980 W995 Yari Z500 Z520 Z525 Z530 Z550 Z558 Z610 Z710 Z750 Z770 Z780 Z800 Zylo Sony Ericsson phones W850i W850c W880i W888c W890 W900 W902 W910i W908c W980 W995 W995a Yari U100i Yari U100a Z500a Z520i Z520c Z520a Z525a Z530i Z530c Z590i
8. copies of an object in an animation the same object should be used wherever possible For example instead of having 10 different cars passing by the minimum number appearing in the scene at any time should be used and their position visibility and so on can be animated and still seem to appear like 10 different objects e SVG animations as well as other properties and attributes are inherited from parents groups to their children objects in the group This means that an animation applied to a group will also apply to the children This should be kept in mind when animating multiple objects with the same animation Depending on the structure of the illustration objects may be combined into a single group and only the parent may need to be animated instead of each child e Combine path objects to make compound paths whenever possible For example if text elements have been converted into paths separate letters should be combined into a single compound path As opposed to a group of paths a compound path is a single definition of a path with multiple end points refer to the user manual of the creative application in use By reducing multiple path objects into a single path object both the file size and the number of animations needed may be reduced e Some animations require more processor power than others alternative methods should always be tried Instead of animating the opacity of an object it may be better to animate the f
9. creating static SVGT Content cccecccceeeeeeeeeeeeeeeeeeeeeeeeeeeeeeees 13 Graphic IOOlS ui uii Fu ten e ee a svenu dasa isavvaveuevesdivseteest deeseyedal 13 Creating SVG Animations 00 cece cece eeeeeeeeeee eee eeeeeee ed eeeaaaaaaeaeeeeeeeeeeeeeseceaeaaeaeeees 16 Ikivo Animator 1 1 Mac OS and Microsoft Windows 0 ceceeeeeeeeeeeeeeeeeee 16 General SVG optimisation tiPS 2 0 cee ce ee ceeeeene ee eee ee ee eee eeeeaeaaeaeeeeeeeeeeeseteeenaaeaeeees 17 LINKS ANC referentes PERY V PH HF FEE FEN NR DY EDN NU AFU 18 SVG SVG Scalable Vector Graphics is an open standard format for vector graphics on the Web SVG overview Image created in Adobe Creative Suite 2 courtesy of Adobe Systems Inc Introduction In 2001 the World Wide Web Consortium W3C approved Scalable Vector Graphics SVG as its standard for XML eXtensible Mark up Language vector graphics on the web Because it is based on XML and is an open standard SVG has become a component of many industry initiatives and Enterprise solutions As large parts of SVG are modeled after HTML web developers find SVG to be the perfect complement to HTML HTML and SVG are used side by side in web applications with HTML as the language for text oriented applications and SVG as the language for graphics oriented applications SVG SVG is the open standard XML based graphics that leverages other standards such as CSS Cascading Style Sheets
10. developer WORLD Developers guidelines June 2010 SVG support in Sony Ericsson phones Sonu Ericsson SVG Purpose of this document This document is intended for developers who want insight into the implementation of SVG Scalable Vector Graphics in Sony Ericsson phones People who can benefit from this document are e Content designers and developers e Operators and service providers e Content providers It is assumed that the reader is familiar with the basics of Web graphics sony Ericsson Developer World At www sonyericsson com developer developers find the latest technical documentation and development tools such as phone White papers Developers guidelines for different technologies Getting started tutorials SDKs Software Development Kits and tool plugins The Web site also features news articles go to market advice moderated discussion forums offering free technical support and a Wiki community sharing expertise and code examples For more information about these professional services go to the Sony Ericsson Developer World Web site These Developers guidelines are published by Sony Ericsson Mobile Communications AB SE 221 88 Lund Sweden www sonyericsson com Sony Ericsson Mobile Communications AB 2006 All rights reserved You are hereby granted a license to download and or print a copy of this document Any rights not expressly granted herein are reserved 36th version J
11. dobe GoLive CS1 or CS2 and Check Syntax against SVG Tiny 1 1 Make the suggested changes based on error messages until the file is compliant Graphic tools Several commercial vector based graphic tools are well suited to generate SVG files Most of these are not specific to SVG Tiny creation but with a few tweaks the output can be constrained to SVG Tiny limitations Adobe Illustrator CS2 Mac OS and Microsoft Windows Adobe Illustrator versions 10 and up can export SVG but the support for SVG has been greatly enhanced in the Creative Suite CS versions SVG For detailed information about Adobe lllustrator please refer to http www adobe com products illustrator main html The following Adobe lllustrator features are useful for SVGT content creation e SVG 1 0 1 1 1 17 and 1 2 Full Basic and Tiny profile export e Conversion of text to outlines ensures proper display of text in devices with limited font support e LiveTrace functionality allows creation of vectors out of photographic or other raster images e Bitmap embedding embedded bitmap data ensures proper asset management no missing links e Support for XML IDs e Round trippable SVG import and preserve SVG animation elements Adobe Illustrator tips For the most streamlined SVG export make sure that the following items in the SVG Options dialog are not checked click More Options to see all items e Preserve Illustrator Editing Capabilit
12. er an underscore _ or colon SVG CorelTRACE tips e When using Trace by Advanced Outline path complexity should be minimised by setting e highest possible value for Noise Filter e lowest possible value for Complexity minimum number of colors e lowest number of nodes SVGmaker Tiny Microsoft Windows only SVGmaker Tiny is a printer driver for generation of SVGT content from any Microsoft Windows program One of its most important features is that it converts text to paths For detailed information about SVGmaker Tiny please refer to http Awww svgmaker com SVGmaker Tiny tips e SVGmaker Tiny should be used not SVGmaker Standard e Using SVGmaker Tiny will not group path objects that are generated when text objects are converted to paths However you may find that many letters are joined as compound paths particularly the lower case string in a word and they are printed to the SVG document from the graphical layout in order from top to bottom left to right This should be considered when editing SVGmaker output in other programs e IDs are lost or replaced when content is run through SVGmaker Tiny Inkscape Mac OS Microsoft Windows Linux Inkscape is an open source SVG drawing tool For detailed information about Inkscape please refer to http inkscape org Inkscape features e Lots of online tutorials and documentation contributed by users e XML editor for source code editing e Trace B
13. ies Optimise for Adobe SVG Viewer Include Adobe Graphics Server data Include Slicing Data Include XMP e To minimise the path data points when using Live Trace e Minimise number of colors used fewer colors gives fewer paths e Maximise area for sampling the larger Min Area value the less the path data CorelDRAW Graphics Suite 12 Microsoft Windows only For detailed information about CorelDRAW please refer to http www corel com The following CorelDRAW features are useful for SVGT content creation e Round trippable SVG import and preserve SVG elements e Conversion of text to outlines ensures proper display of text in devices with limited font support e Preservation of object names as IDs e Bitmap embedding embedded bitmap data ensures proper asset management no missing links e CorelTRACE allows creation of vectors out of photographic or other raster images CorelDRAW tips e CorelDRAW does not have an explicit SVG Tiny export option To conform as closely as possible to the SVG 1 1 Tiny or SVGT 1 2 DTDs Set Styling Options to Presentation Attributes e Export Text As Curves e The size of the illustration is as indicated by the page size under Page Setup e When working with a multi page layout only the current page is exported as SVG e When renaming an object XML naming conventions must be followed e Names cannot contain spaces and cannot begin with a number e Names must begin with a lett
14. ill and or stroke colors to a background color for example animate a red rectangle on a blue background to blue instead of to 0 opacity e Sometimes rasters are better than vectors If it is certain that a graphic object will not need to scale or that the image quality will not be compromised in the animation it might be desired to use a JPEG or PNG instead It depends on the complexity of the vector description as opposed to the complexity of the pixel per pixel definition of an image For example a photographic image with many colors gradients and path points may be simpler to describe as a raster JPEG image However objects which are originally vectors such as logos or geometric objects may be more efficiently described as vectors It is advised to test different approaches and see which works best for the content both in terms of performance and file size Rasterised images should also be used for content with complex graphic effects such as blurs and mesh type gradients Cool animation effects can be created on objects like these SVG Reduce path points to the minimum reguired Removing unnecessary path points can greatly reduce the amount of data without compromising the image quality see notes above on using Adobe lllustrator LiveTrace and Corel CorelTRACE tools Gradients are processor intensive and should be used with some care Especially gradients used over large areas could effect the performance in a negative way
15. ion R11A 11th version 2007 02 06 Version R12A 12th version 2007 03 13 Version R13A 13th version Change history 2007 03 27 2007 05 08 2007 06 14 2007 08 21 2007 09 21 2007 11 06 2008 01 06 2008 02 20 2008 05 20 2008 06 17 2008 07 22 2008 09 09 2008 10 17 2008 11 11 2009 01 09 2009 02 15 2009 03 26 2009 05 28 2009 06 25 2009 08 12 2009 10 26 2009 12 16 2010 04 13 2010 06 16 Version R14A Version R15A Version R16A Version R17A Version R18A Version R19A Version R20A Version R21A Version R22A Version R23A Version R24A Version R25A Version R25B Version R26A Version R27A Version R28A Version R29A Version R30A Version R31A Version R32A Version R33A Version R34A Version R35A Version R36A 14th version 15th version 16th version 17th version 18th version 19th version 20th version 21st version 22nd version 23rd version 24th version 25th version 25th revised version New document layout 26th version 27th version 28th version 29th version 30th version 31st version 32nd version 33rd version 34th version 35th version 36th version SVG Scalable Vector Graphi0 S 4 4uu ii x iwii senu SEN ARSCH aaneen ENNEN SONED 9 SVG EE 9 Tau ge o d Coat o EE 9 SVG support in Sony Ericsson phones eect eee cece eee eeeeeeeaeae eee eeeeeeeeeeeeeeaaaaeaaees 11 Creating static SVGT content 20 cece eee eeeeeenee eect eee LL eee ee eee aaaaae cae eeeeeeeeeeeeeeeaaeaaeaeeees 13 General tips for
16. itmap command allows creation of vectors out of photographic or other raster images SVG Creating SVG animations SVG animations follow simple instructions over time This is in contrast to frame based animation formats like Macromedia Flash SWF where each frame of an animation must be drawn Time based animations like SVG animations are highly efficient and are not dependent on processor speed For example a 5 second animation will last exactly 5 seconds and an animation requires no more code to run for 5 hours than for 5 seconds Time based animation ensures precise synchronisation with other media and events such as the start or end of sound and video It is important to note that SVG animations are based on the SMIL Synchronised Multimedia Integration Language Specification As a result of that timing of animations takes precedence over display animations must render accurately according to the timeline When rendering frame based cartoon type animations in a SVG viewer the viewer may have to drop some frames to force the animation to fit into the time slot assigned to it Therefore it is strongly recommended to limit the use of frame based animations as far as possible and simply animate color fills or position rotation scale transformations instead lkivo Animator 1 1 Mac OS and Microsoft Windows For detailed information about lkivo Animator 1 1 please refer to http www ikivo com animator index html lkivo Anima
17. s which are based on XML are in addition compressed with standard gzip compression This makes vector based images attractive for mobile phones and wireless networks Vector based graphics are inappropriate to use for pictures and other kinds of images that are not composed of distinct lines and curves A bitmap image such as a GIF can however be embedded inside the vector based image In practice animations are often created by using a bitmap in the background and animated vectors in the foreground Since SVG is based on XML it is particularly good for data driven graphics where the data is delivered in XML from the backend such as weather services stock quotes and statistical data Another advantage is that an SVG image is searchable which opens up new possibilities for search engines for example Google and makes SVG particularly appropriate for maps SVG support in Sony Ericsson phones All phones in the scope of this document support viewing of SVGT content received via MMS The web browser in Aino C510 C702 C901 C902 C903 C905 Cedar Elm G502 G705 Hazel Jalou K510 K530 K550 K610 K630 K660 K770 K790 K800 K810 K850 Naite Pureness S500 T650 T700 T707 T715 V640 W200 W300 W508 W550 W580 W595 W600 W610 W660 W705 W710 W715 W760 W810 W830 W850 W880 W890 W900 W902 W910 W980 W995 Yari Z530 Z550 Z558 Z610 Z710 Z750 Z770 Z780 and Zylo series also support SVGT in
18. tor 1 1 features e Imports and opens any SVG formats Tiny through Full profiles and outputs SVGT 1 17 content e Includes Ikivo SVG Player software for accurate preview of animations using real device profiles emulating color depth frame rate and anti aliasing Device profiles are available for all Sony Ericsson phones with SVG support e Preserves SVG animations created in other tools but not understood by Animator because the SVG Specification allows different ways of describing the same animation and lkivo Animator can only comprehend a limited range of these variations Trapping enables the preservation of other valid forms of SVG animation e Integration with Adobe Illustrator CS2 and Adobe GoLive CS2 e Includes professional but easy to use creative palettes for color transformation and paced ease in ease out animations Resources in the form of tips and tricks developer forums and tutorials for the lkivo Animator and Ikivo SVG Player can be found here e Ikivo Animator Mobile Developers Zone Online tutorials covering a variety of animation features in Animator http www ikivo com animator devzone index html e Ikivo Animator Workflow Tutorial Downloadable PDFs for step by step instructions on how to build a sample location based services type map application Mac OS SVG and Windows versions http www ikivo com animator O2animator 7downloads html General SVG optimisation tips e lf there are multiple
19. une 2010 Publication number EN LZT 108 7937 R36A This document is published by Sony Ericsson Mobile Communications AB without any warranty Improvements and changes to this text necessitated by typographical errors inaccuracies of current information or improvements to programs and or eguipment may be made by Sony Ericsson Mobile Communications AB at any time and without notice Such changes will however be incorporated into new editions of this document Printed versions are to be regarded as temporary reference copies only All implied warranties including without limitation the implied warranties of merchantability or fitness for a particular purpose are excluded In no event shall Sony Ericsson or its licensors be liable for incidental or consequential damages of any nature including but not limited to lost profits or commercial loss arising out of the use of the information in this document SVG Document conventions Products Sony Ericsson phones are referred to in this document by generic names Generic names Series Aino C510 C702 C901 C902 C903 C905 Cedar Elm F500 G502 G705 Hazel Jalou K300 K500 K510 K530 K550 K600 K610 K630 K660 K700 K750 K770 Sony Ericsson phones Aino U10i Aino U10a C510 C510c C510a C702 C702c C702a C901 C901a C901 GreenHeart C902 C902c C903 C903a C905 C905c C905a Sony Ericsson Cedar J108i Sony Ericsson Cedar J108a
Download Pdf Manuals
Related Search