svg format

Scalable Vector Graphics (SVG) merupakan format gambar yang umumnya digunakan pada gambar vektor. Keunggulan gambar berformat SVG adalah tampilannya yang tetap rapi sekalipun dia diperbesar.

Format gambar SVG mulai diterapkan pada browser web seperti Opera dan Firefox. Gambar vektor diperkirakan akan menjadi format yang cukup banyak digunakan di beberapa tahun mendatang. (wikipedia.org)


cara melihat SVG

SVG didukung oleh Firefox dan Opera web browsers. web surfers terpopuler yang digunakan selain Internet Explorer - jika anda menggunakan Internet Explorer dan ingin browsing web site dengan SVG anda membutuhkan SVG viewer plugin seperti salah satunya dari Adobe atau mungkin Apache Batik.

covert pdf jadi svg (inkscape format)

Convert PDF documents to SVG for Inkscape (pdf2svg)

I searched and searched the web for a project that could convert PDF documents into an editable format for some free software on Linux. I use Ubuntu daily at my workplace and only use a single Windows application for accounting software via RDP / VMPlayer. I needed a way to be able to modify PDF documents and I have Inkscape with all the features I need, except a functioning PDF import filter. Inkscape uses pstoedit which doesn't extract embedded raster images and convert them for the SVG format. There is a plugin for pstoedit to convert to SVG for $50, but it caused a segfault on my machine. So no joy with a single tool to automagically convert my documents.

I spent a loooong time trying different formats from pstoedit and converting through various other software to end up with an SVG file that I can use in Inkscape with included raster images. The following is the process I used to create the best results. The steps I have used are for creating one page at a time. Some more automation could be added to make most of this work without all these steps, as well as to do each page in the PDF document automatically.

Step 1
Create a working directory for this project. You will likely be creating hundreds of files during this process and it can get messy if it's mixed in with other documents.

Step 2
Make a Level 1 Postscript file from a page in the PDF document. When extracting pages from a PDF document, pstoedit's intermediate file formats have no support for Level 2 Postscript raster images. We'll create a Level 1 Postscript file from a PDF page that pstoedit will handle correctly.

pdf2ps -f pagenum -l pagenum -dLanguageLevel=1 document.pdf page.ps

Step 3
Convert the page to the fig format. The pstoedit tool does this job decently, and creates tons of files in the process. This process creates a .fig document with all of the images in separate EPS files. The .fig document simply references the image files to be included. At this point you could use xfig to make modifications, but it would be horribly slow and difficult to work with. This process will also rasterize all text, but I'll show in a later step how to get vectors back in your document.

pstoedit -f fig page.ps page.fig

Step 4
Convert from the fig format to the SVG format. When this is done, the SVG document contains only some formatting and placement information, while referencing all of the external EPS files.

fig2dev -L svg page.fig page.svg

Step 5
Convert EPS images to PNG images for use with Inkscape. Inkscape can't import those raster EPS files, only vector EPS files (it uses pstoedit to do the conversions, so it is limited by that tool). The EPS images must be converted to an image format that Inkscape can use. I chose PNG because the format is free, standardized, and lossless. Unfortunately, there is a problem that prevents a direct conversion. When pstoedit created the EPS files with embedded raster images, the EPS file may specify an incorrect image size/formatting. This shows up as white lines that surround the raster images, and the white lines are inconsistent between the images. What must be done is to extract the raster image data from the EPS file, not using the EPS specified sizing and formatting. The way to do this is rather ugly, but it works. First, the EPS files will be converted to PDF files. Second, the tool pdfimages will extract the raster images from the PDF files. Third, the Imagemagick tool convert will conver the images to PNG files.

#!/bin/sh
mkdir tmpimages
for epsfile in *.eps
do echo "${epsfile}"
convert "${epsfile}" "${epsfile}.pdf"
pdfimages "${epsfile}.pdf" tmpimages/
convert tmpimages/* "${epsfile}.png"
rm -f "${epsfile}.pdf"
rm -f tmpimages/*
done
rm -rf tmpimages/

Step 6
Change all the references in the SVG file from .eps to .eps.png. Open your favorite text editor (or get creative with sed) and change all .eps to .eps.png.

Step 7
Add the proper attributes in the

xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://web.resource.org/cc/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

Step 8
Extract vector information from the PDF document. If the PDF document contains text or vector information, it will have been converted to raster images as described earlier. The pstoedit tool can do this job as well.

pstoedit -f plot-svg -page pagenum -ssp -mergetext document.pdf page_text.svg

Step 9
Place the SVG text in the SVG document with the images.

a) Open both SVG documents with Inkscape.
b) Switch to the document that has the text only.
c) Select all the items then group them together as a single object.
d) Copy that object and paste it into the SVG document with the graphics.
e) Send the SVG text below the rasterized text in the document.
f) Delete all of the rasterized text to show only the SVG text below it.

Notes
It is my understanding that converting to fig documents may screw with your units due to a not high enough resolution. I have not confirmed this. You may want to scale the document up by a large factor (10x), do the conversion to the xfig format, then use xfig to scale back down before exporting.

Known Problems
Some raster images may not be clipped properly. This must be fixed manually. This is only a formatting issue and does not affect the quality of the images. Text may be converted to paths and may not be editable.

Warning
This could possibly take a LOT of disk space. Make sure to have at least several hundred megabytes free. It could also take a lot of memory and time for Inkscape to open the document for the first time until all the rasterized text is removed. Please be patient.

Menguasai Inkscape

Inkscape adalah sebuah software untuk mengambar vektor sama seperti Corel Draw, Freehand, Xara dan Adobe Ilustrator. Yang menjadikan Inkscape terkenal adalah kemampuannya yang setara dengan program papan atas meskipun demikian Inkscape berlisensi GPL Versi 2 alias Gratis.

"GNU GENERAL PUBLIC LICENSE Version 2, June 1991 [2]. In short, this means you are free to use and distribute Inkscape for any purpose, commercial or non-commercial, without any restrictions. You are also free to modify the program as you wish, but with the only restriction that if you distribute the modified version, you must provide access to the source code of the distributed version."

Buku ini bukan saja berisi ulusan kemampuan atau tools pada Inkscape tetapi juga membuka rahasia teknik pembuatan gambar-gambar yang sering dipakai oleh Designer professional, seperti membuat Tulisan Timbul, Gambar 3D, Efek Cermin, Efek Bayangan, Efek Tembus Pandang dan sebagainya.
Apakah Inkscape Itu?

Inkscape adalah program untuk membuat gambar vektor sepeti Adobe Illustrator, Corel Draw, Freehand, dan Xara X. Uniknya Inkscape berlisensi GPL Versi 2 atau dengan kata lain Inkscape adalah program gratis yang boleh dipakai oleh siapa saja. Meskipun gratis kemampuan Inkscape setara dengan program komersial seperti Corel Draw, Freehand, Adobe Illustrator dan Xara X. Bahkan semakin lama anda menggunakan semakin terasa bahwa Inkscape lebih baik dibandingkan program komersial tersebut.

Kemampuan Inkscape:

1. Format file yang dipakai oleh Inkscape adalah SVG (Scalable Vector Graphics) yang merupakan standar W3C berbasis Open XML.
2. Mendukung banyak efek termasuk efek transparansi atau tembus pandang dan blur.
3. Loading aplikasi yang sangat cepat.
4. Mendukung export dan import beberapa format grafik.
5. Dapat melakukan trace pada gambar bitmap sehinga menjadi vektor.
6. Dapat diprogram (hal ini sama seperti Corel Draw menggunakan VBScript untuk pemrogramannya).
7. Mempunyai beberapa color schemes sehingga memudahkan designer untuk memilih warna yang serasi.
8. Menggunakan cara kerja yang mirip dengan Corel Draw dan Xara X, sehingga sangat memudahkan designer untuk menyesuaikan diri dengan Inkscape.
9. Dapat berjalan di atas OS Linux, Windows 2000/2003/XP/Vista dan OSX (dmg package). Juga FreeBSD dan berbagai OS berbasis Unix. Windows 98/ME tidak didukung oleh Inkscape.


Siapa Yang Membuat Inkscape?

Inkscape berasal program Gill (GNOME Illustrator) yang dibuat oleh by Raph Levian pada tahun 1999. RRaph merupakan salah satu developer Ghostscript. Pada tahun 2003 proyek Inkscape dimulai oleh 4 developer Sodipodi (www.sodipodi.com) yaitu: Bryce Harrington, MenTaLguY, Nathan Hurst, dan Ted Gould dengan menggunakan bahasa C++. Tujuan mereka adalah membuat program yang mendukung format SVG (Scalable Vector Graphics) dan bersifat terbuka (open) dan berbasiskan pada dukungan komunitas. Dalam beberapa bulan proyek ini berhasil mengeluarkan beberapa release.


Di mana mendapatkan Inkscape?

Inkscape dapat di download di: http://www.inkscape.org/. Dengan ukuran yang cukup kecil hanya 20 MB dibandingkan dengan program komersial yang mencapai lebih dari 100 MB. Pada website ini tersedia Inkscape sesuai dengan versi yang dapat berjalan di OS berikut: Linux, Windows 2000/2003/XP/Vista dan OSX (dmg package). Juga FreeBSD dan berbagai OS berbasis Unix. Windows 98/ME tidak didukung oleh Inkscape.


Contoh Karya Inkscape

Untuk melihat kemampuan Inkscape silahkan lihat contoh berikut ini.









Gambar Bitmap vs Vector

Gambar grafis di dalam dunia komputer dibagi atas 2 jenis: Bitmap dan Vector. Gambar Bitmap (atau Raster) merupakan gambar yang tergantung pada resolusi tertentu dan menyimpan gambar sebagai kumpulan dari piksel. Sehingga jika gambar Bitmap diperbesar akan menjadi pecah atau tidak halus lagi. Sedangkan gambar Vector tidak tergantung resolusi dan tidak pecah jika diperbesar.

Kedua jenis gambar ini dulunya berdiri sendiri sehingga programnya juga terpisah. Untuk gambar Vector memakai Corel Draw sedangkan gambar Bitmap memakai Photoshop. Jenis gambar Bitmap umumnya dipakai untuk menyimpan photo sedangkan Bitmap umumnya dipakai untuk pembuatan Logo.


Tetapi dalam perkembangannya kedua jenis gambar ini dipakai untuk saling mendukung sehingga tercipta karya seni yang bagus. Misalnya saja dalam pembuatan kartu undangan maka tata letak dan tulisannya menggunakan Vector sedangkan Photo diimport dari gambar Bitmap. Sebagaimana CorelDraw dan Ilusstrator mampu mengimport gambar Bitmap maka Inkscape-pun juga demikian.

Di dalam Inkscape gambar Bitmap dan Vector ini dapat dipakai kedua-duanya. Ada juga fasilitas untuk mengkonversi gambar Bitmap menjadi Vector. Proses konversi ini disebut dengan istilah: Tracing.
Contoh Program Gambar Vektor

1. Inkscape
2. Corel Draw
3. Adobe Illustrator
4. Xara X

Contoh Program Gambar Bitmap

1. Adobe Photoshop
2. GIMP
3. Microsoft Paint


SVG

Format file SVG saat ini merupakan format yang paling popular. Mengapa demikian? SVG (Scalable Vector Graphics) merupakan suatu format gambar Vector yang berbasis Open XML untuk membentuk gambar 2 dimensi termasuk animasinya dalam format XML (eXtensible Markup Language).

File yang disimpan dalam format SVG ini sangat kecil ukurannya. Dan sudah didukung oleh hampir semua program gambar karena format gambar ini juga didukung oleh browser Firefox dan Opera.

Contoh gambar yang menggunakan SVG (sumber: http://www.mozilla.org/projects/svg/):

svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
baseProfile="full">

transform="translate(0,50)" />
transform="translate(70,150)" />
transform="translate(-70,150)" />

/svg>

Hasil dari kode SVG di atas jika ditampilkan dari browser adalah sebagai berikut:

Perhatikan bahwa gambar di atas mendukung adanya Transparansi pada saat obyek gambar saling tumpang tindih. Dari website Mozilla dijelaskan bahwa ruang lingkup SVG hampir sama dengan Macromedia Flash. Tetapi SVG mendukung beberapa tambahan penting, antara lain:

* anti-aliased rendering,
* pattern dan gradient fills,
* sophisticated filter-effects,
* clipping to arbitrary paths,
* text dan animations.

Yang membedakan antara SVG dan Flash adalah bahwa SVG merupakan rekomendasi dari W3C dan berbasis XML. Sedangkan flash merupakan format yang tertutup.


Native SVG dan Plugin SVG

Ada 2 cara sebuah browser mendukung SVG, yaitu:

1. Native SVG
2. Plugin SVG

Native SVG artinya browser secara langsung sudah mendukung format SVG. Sedangkan untuk browser yang tidak mendukung SVG dapat dilakukan dengan memasang Plugin (atau disebut juga Extension/Add-Ons). Salah satu Plugin yang terkenal adalah Adobe Viewer (http://www.adobe.com/svg/).