background preloader

SVG

Facebook Twitter

SVG Tutorial. DE:Osmarender – OpenStreetMap Wiki. Dies Seite ist eine Übersetzung aus den Englischen. Es fehlen die Übersetzungen der verlinkten Seiten. Im Zweifel schaue dir das Original an: Osmarender. Osmarender ist ein regelbasiertes Wiedergabe-Programm, um aus den OSM-Daten SVG-Grafiken zu erzeugen. Als Eingabedaten nutzt das Programm einen OSM-Datensatz und eine Datei, die Regeln enthält. Das Programm erzeugt eine SVG-Grafik, die mit den in den Regeln definierten Styles (englisch, übersetzt "Stile" oder "Ausdrucksweisen") entsprechend gerendert wurde. Willst du Osmarender benutzen, dann informiere dich auf folgenden Seiten (alle englisch): Für Ungeduldige: der Quick HowTo.

Mobile SVG Profiles: SVG Tiny and SVG Basic. Abstract This document defines two mobile profiles of SVG 1.1. The first profile, SVG Tiny, is defined to be suitable for cellphones; the second profile, SVG Basic, is suitable for PDAs. Status of this document This section describes the status of this document at the time of its publication. This document is the 14 January 2003 Recommendation of the SVG Mobile specification. On 15 June 2009 this document was edited in place to fix a number of links to point to a dated version of the SVG 1.1 specification. Public comments on this Recommendation are welcome. The W3C SVG Working Group have released a test suite for SVG 1.1 and SVG Mobile along with an implementation report.

The latest information regarding patent disclosures related to this document is available on the Web. This document has been produced by the W3C SVG Working Group as part of the Graphics Activity within the W3C Interaction Domain. Table of contents 1. 2. SVGT and SVGB consist of the following SVG 1.1 modules. SVG Tiny a text. SVG & Mobile. It has always surprised me that the mobile industry has not made better use of SVG. On the face of it, SVG is perfectly suited to publishing rich content on mobile devices for a number of reasons: It is a compact way of representing vector graphicsSVG graphics (in keeping with the name) can be scaled to arbitrary sizes, removing some of issues with screen dimension proliferation on mobile devicesIt is an open standardDevice support is better than you might think (more on this later)Because SVG is based on XML, many existing XML tools can be used to generate content This article summarises the capabilities of SVG and how best to take advantage of it for mobile applications.

I will not attempt to describe how to build SVG content since there are plenty of good tutorials elsewhere (see References & Links section below). First a quick recap on what exactly SVG is all about. From the Wikipedia: So, SVG is essentially an open standard for an XML-based representation of vector graphics. MIME Type. SVG/ Einführung/ Kurze Einführung in XML. Vorwort Kurze Einführung in XML Vektorgrafik Software Kurze Einführung in XML[Bearbeiten] Soweit es von Belang ist, soll hier kurz auf die prinzipielle Sprachkonstruktion eines XML-Formates eingegangen werden (XML - erweiterbare Auszeichnungssprache, englisch: eXtensible Markup Language).

Bereits vor der Jahrtausendwende hat sich am Beispiel von HTML (Versionen 1 bis 4, Hypertextauszeichnungssprache, englisch: HyperText Markup Language) gezeigt, dass diese auf SGML (englisch: Standard Generalized Markup Language) basierende Sprache derart komplex ist, dass es bis zum heutigen Tage kein Darstellungsprogramm geschafft hat, diese komplett zu interpretieren.

Auch die offengelassene Fehlerbehandlung hat letztlich zusammen mit der unvollständigen oder fehlerhaften Interpretation der Darstellungsprogramme dazu geführt, dass dieses Format gewissermaßen korrumpiert ist, gleichzeitig aber durch die häufige Verwendung im Internet zu einem der wichtigsten Formate überhaupt geworden ist. <? All aural tty. Using SVG on Android 2.x (and Kendo UI DataViz) Indoor Navigation with SVG. SVG, positioning technologies, mobility, guiding system Christian SchmittResearcherFraunhofer FIT Schloss Birlinghoven Sankt-Augustin Germany christian.schmitt@fit.fraunhofer.de Oliver KaufmannFraunhofer FITSchloss Birlinghoven Sankt-Augustin Germany oliver.kaufmann@fit.fraunhofer.de This paper describes a mobile guide providing office building visitors with indoor navigation aid. 1. 1. FIT has a long history in developing mobile guides for museums, fairs, symposiums. Our mobile guide was developed with the aim to be used for demo purposes by visitors to our institute, for demonstrating our expertise in mobile computing, positioning technologies and human-computer interface.

Present information about our research department (employees, projects)Let the user experience indoor navigation on our floor Presenting information can be easily achieved by integrating functionalities from the Pocket Internet Explorer in the application and having the content available as HTML pages. 2. 3. 4. SVG.Open/Carto.net 2002, Zurich, 05_reichenbacher_adaptivevisualisation.

Tumasch Reichenbacher Department of Cartography Technical University Munich Arcisstr. 21 München 80333 Germany e-mail: tumasch@bv.tum.de fax: ++49 89 280-9573 webpage: Keywords: mobile cartography; adaptive visualisation New technologies, such as telecommunication, mobile Internet, and handheld computing devices, offer new chances to the everyday use of geoinformation.

The limited resources in a mobile environment, ranging from low CPU and memory to small screens and low network bandwidth, constitute a major problem. Hence, after a brief description of the characteristics of the mobile environment, we will sketch a general conceptual framework for geoinformation usage in a mobile environment based on an adaptive approach. This paper will be focused on adaptive and dynamic generation of visualisations for mobile users on the basis of SVG. Introduction The field of geoinformation technology and cartography have seen dramatic changes in the last twenty years. SVG.Open/Carto.net 2002, Zurich, 05_reichenbacher_adaptivevisualisation. Svg-android - SVG parsing and rendering for Android. Vector Graphics Support for Android! Please note: the latest source code for this project is now on Github: This is a compact and straightforward library for parsing SVG files and rendering them in an Android Canvas.

By using vector art, the pain of supporting various screen sizes and densities in Android can be reduced. This was the library used to render the artwork and the interface of Androidify. The project also includes a Live Wallpaper app extracted from Androidify. Simple To Use Just place SVG files in the res/raw folder of your project, then load them as resources in your activity and work with them as android.graphics.Picture objects or as drawables: SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.filename); Picture picture = svg.getPicture(); Drawable drawable = svg.createPictureDrawable(); See the Tutorial for more information, SampleImages for more examples of what you can do, or the Javadocs for the complete API.

Release Notes. Pents90/svg-android. Indoor Navigation with SVG. SVG, positioning technologies, mobility, guiding system Christian SchmittResearcherFraunhofer FIT Schloss Birlinghoven Sankt-Augustin Germany christian.schmitt@fit.fraunhofer.de Oliver KaufmannFraunhofer FITSchloss Birlinghoven Sankt-Augustin Germany oliver.kaufmann@fit.fraunhofer.de This paper describes a mobile guide providing office building visitors with indoor navigation aid. 1. 1. FIT has a long history in developing mobile guides for museums, fairs, symposiums. Our mobile guide was developed with the aim to be used for demo purposes by visitors to our institute, for demonstrating our expertise in mobile computing, positioning technologies and human-computer interface. Present information about our research department (employees, projects)Let the user experience indoor navigation on our floor Presenting information can be easily achieved by integrating functionalities from the Pocket Internet Explorer in the application and having the content available as HTML pages. 2. 3. 4.

Create A 3D Floor Plan Model From An Architectural Schematic In Blender. In this tutorial you'll learn how to create a 3D floor plan model from an 2D architectural drawing. Karan Shah will show you some simple, yet effective techniques for constructing the walls, windows and doors following a basic interior schematic in Blender. With the model complete we'll add materials and textures, and do a final render of the scene. Additional Files/ Plugins:Floor Plan Schematic Step 1 Floor Plans are simply a drawing or a diagram showing a top view of a site layout. You can see the picture to understand the meaning of some basic symbols used. Step 2 In a new file, select all objects with the 'A' key and press 'Del' to delete them.

Step 3 Press '7' on the NumPad to get into the Top view. Step 4 With the Plane selected, press 'TAB' to get into 'Edit' mode. Step 5 Now we will cover all the black solid areas i.e. the walls. Step 6 Select the right two vertices and press 'E' to extrude, and match the reference. Step 7 Step 8 Step 9 Select the two vertices and extrude the wall. Step 10. HTML5 Interactive Map using SVG Path and Polygon. Download source - 191.1 KB Table of Contents Recently I was revisiting the article Silverlight - Creating Image Map with Hotspots that I wrote couple years ago using Silverlight and Expression Blend 3.0.

I decided to redo it using HTML5. This brief tutorial demonstrates on how to implement the interactive map using HTML5, KineticJS and jQuery. Shown in figure 1 are the files in the sample project. The images folder contains all the flag images and InteractiveMapData.js file contains all the map information. Figure 1 You can use expression blend to create the SVG path, please refer to Silverlight - Creating Image Map with Hotspots for more information. Click on Start a new Phoenix link creation under Launch Phoenix imageA new window will open, click on Load an image file linkYou can browse for the image on your PC or provide an absolute link to the picture and hit the upload button. Another option to create interactive map/image is to use SVG polygon. Listing 1 Listing 2 Listing 3. Interactive SVG map. I've been learning how to animate SVGs (I've written a couple of tutorials of what I have since learnt here and here) and have updated my map-drawing program to create interactive maps.

Below is a map I made to show life expectancy (at birth, as of 2007) in Africa. You can mouse-over the map to see the name of a country and the life expectancy there. I'm impressed with how powerful SVGs can be, but slightly disappointed that transparency doesn't work in Chrome [update: it seems to work now - Horray!].

The map can look a bit grainy, but looks a lot smoother if you zoom in a bit. Life expectancy (2007) Note, Internet Explorer before IE9 can't render SVG and Firefox doesn't support mouse-over animation. The mouse-over effect works by adding a set element to each country's path with changes the opacity of the path as the mouse moves over it: The only country for which this appears not to work is Lesotho, the enclave in South Africa. For example, the Algeria text element contains: HTML5 Interactive Map using SVG Path and Polygon.