Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Konwersja Shapefile do SVG

Autor: Piotr Karpiuk o 7. marca 2017

Na stronach webowych nieraz chciałoby się pozwolić użytkownikowi wskazać myszką jakiś obszar geograficzny (państwo, województwo, gmina) na uproszczonej mapie, jak poniżej:

Taka interakcja znajduje zastosowanie we wszelkiego rodzaju wizualizacjach danych, menu witryny, formularzach itp.

W dzisiejszych czasach stosowną do tego technologią jest grafika wektorowa, w praktyce: SVG.

Problemem, którym się dziś zajmiemy jest odpowiedź na pytanie skąd wziąć dane wektorowe i jak je przekształcić do użytecznej postaci (czytaj: niewielkiego pliku SVG).

Czytaj więcej »

Tags: , ,
Napisany w datavis, GIS, WWW | Brak komentarzy »

SVG

Autor: Piotr Karpiuk o 2. grudnia 2010

Przydatne odnośniki
SVG 1.1 Spec
SVG Tutorial
SVG Examples

Grafika wektorowa 2D w przeglądarce WWW to stary motyw. Podejść mniej lub bardziej udanych było w historii co najmniej kilka:

  • Adobe Flash (od połowy lat 90tych),
  • VML (ang. Vector Markup Language, Microsoft, 1998) – używane w Internet Explorerze,
  • PGML (ang. Precision Graphics Markup Language, Adobe/Sun, 1998),
  • SVG (ang. Scalable Vector Graphics, standard W3C, 2001) – standard W3C implementowany we wszystkich nowoczesnych przeglądarkach z wyjątkiem MSIE (chyba że użyjemy wtyczki takiej jak Google Chrome Frame).

MSIE 9 który pojawi się w 2011 roku będzie już implementował standard SVG.

Prosty przykład pliku SVG (rysunek obok zawiera rezultat):

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 width="467" height="462">
  <rect x="80" y="60" width="250" height="450" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
  
  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
</svg>

Możliwości SVG:
Czytaj więcej »

Tags:
Napisany w WWW | Brak komentarzy »