Scientists use illustrations and diagrams to communicate ideas and findings. Today, papers, posters and scientific journals appear in print and on-line. They contain charts, equations, line-art, diagrams and drawings. Use SVG for all types of scientific illustrations. It’s is the ideal format for the scientific arena.
Ensure top quality by using SVG for Scientific Drawings
SVG is the standard vector format for the Web. It’s a feature in most of today’s illustration programs. Vector graphics are ideal for sharing scientific information. Bitmap formats like PNG and JPEg are also used, but, they have limitations compared to vector graphics. They are not editable and don’t zoom without losing quality. Read more about the difference between vector and raster images.
Creating SVG for Scientific Illustrations
For original SVG art, you can use a program like Inkscape. It’s free, feature-rich and produces SVG as its native format.
For files created in other programs, convert them using pdf2picture. This program converts PDF, EPS and Adobe Illustrator vector files to SVG. It’s simple to use and works in vector or image mode. It creates SVG as well as EPS, WMF, EMF, JPEG, PNG, GIF, BMP, and TIFF. These are basically all the formats you need for publishing today.
SVG Example – Scientific Drawing
To zoom in and out on Mac, use command + and command –, On Windows, use ctrl + and ctrl –
If you can not see the SVG image below, please upgrade your browser. All of the latest browsers support SVG.
META FLY Key to Successful Migration
Delta Airlines migrated its technical documentation system to XML for the Web. Large numbers of technical manuals were stored in Interleaf and needed to be converted. The documents contained thousands of graphics with vector, raster and text elements. At the time, the only format which Interleaf could easily export graphics into was WMF. They turned to META FLY Server to batch process the conversion to SVG which is the W3C Web and HTML5 standard for vector graphics. Delta also uses PDF FLY.
Pumping Graphics for Financial Reports
BlueMatrix, makers of leading solutions to publish and disseminate financial research on-line to subscribers, uses PDF Server with SVG and Image output modules on LINUX as part of its state-of-the-art research platform for both sides of the financial community. It powers the online production of financial reports, serving charts and tables generated in the PDF format to Web-friendly formats – PNG and SVG. They also use the SVG files in combination with FOP to create PDF files.
The world-renowned Swiss Federal Institute of Technology, ETH Zurich, forms a community of 20,000 people from 80 nations with an outstanding research record. Visual Integrity products are at work in several faculties. One professor uses MATLAB to generate sophisticated data plots in EPS. To share these, he needed a solution to publish the EPS files to the Web in a format that people could zoom and pan. SVG was the answer, automatically produced in seconds by invoking PDF FLY via a command line script on UNIX.
Mohawk Industries, the leading producer and distributor of flooring worldwide, relies on PDF FLY to streamline their marketing workflow to move logos, product images, brochures and ads into their XML-based online authoring and publishing system. Files are converted on Linux from EPS into SVG, the XML standard for scaleable vector graphics on the Web.
Pumpling Vector Graphics to the Web.
Prior to its acquisition by Odessey, the Reuters Portfolio Management System (RPMS) used the FLY SDK on Solaris and Windows.
This integration enabled real-time delivery of multi-page Oracle reports (PostScript) to the client’s Web browser as scalable vector graphics (SVG) with very little programming effort. Just two calls were used to convert the PostScript files into scalable vector graphics (SVG). Visual Integrity completed some custom development for Reuters related to fonts to ensure accurate screen display (WYSIWYG) which is now part of the standard product. “Our customers help us see new areas to extend the SDK. Thanks to its flexible and well-designed core, we can add new features relatively easily”, said Jean Haney, co-founder and CEO of Visual Integrity. Using SVG, which is the standard web vector format of HTML5, customers benefit from a greatly improved viewing experience and a resolution independent and scalable graphics solution.
View the SVG logo below to see how SVG can scale to any size without losing clarity. To test this:
- click in the margin area to the right or the left of the logo below
- then, with just the logo displayed on your screen, resize your browser from full screen to a quarter of the screen.
The logo will adapt to the new dimensions and looks great at any size. More information about SVG can be found on the W3C site.
SVG XML Publishing
SaabTech Electronics AB manufactures and markets products for the defense industry. The company focuses on optics, precision mechanics, electronics, and system integration systems. It products include tornado radar warning systems; EWS39 – Gripen EW system; BOQ A110 Jammer Pod; JAMMER A100 Training system; BOQ X300 Jammer and EW System; and BOW-21, a radar warning system. Engineers and tech writers at SaabTech Systems use PDF FLY on their Linux desktops to move EPS graphics into their XML content management system as Scalable Vector Graphics (SVG).” One of the primary factors for choosing PDF FLY was the accuracy of the conversion from EPS to SVG. SaabTech Systems has been a customer since 2002, using the software on both Windows and Linux. “Thank You very much for the support, I’m impressed. I have used the tool to convert PCB layout from a Mentor tool to my SSDD document, and I think it’s a great tool. It gives me the possibility to create very detailed assembly instructions. I’m very satisfied.” Best regards from Börje Karlsson
SaabTech Systems has been a Visual Integrity customer since 2002.
Scalable Vector Graphics (SVG) are an important building block for your web-site. If you aren’t using them yet, there are several reasons to consider adding them.
Graphics particularly well suited to SVG are logos, forms, technical illustrations, maps, business charts, statistical plots and schematics. To illustrate this, see the many examples below. If you’d like to know whether your graphics are well suited for vector formats on-line, email us or use the contact form. We’re always happy to help.
SVG is the Open Standard for Vector Graphics
SVG was first defined in 1999 by the W3C, the standards organization for the world-wide-web. Bitmap Image formats were already widely used. but, there was no well defined vector counterpart. It took a while for browsers to support it well, hence adoption was slow. Now, SVG has come into its own and is well supported by all major browsers. Read further and you’ll see that it’s a good time to start using SVG on your website.
Vector graphics scale and zoom with high fidelity. This is not possible with the PNG, GIF and JPEG bitmap formats populating web sites. Image formats lose clarity when enlarged. As they grow bigger, you’ll notice their individual pixels. This makes the details blurry. As a work-around, the same image is often created in several different sizes. This ensures optimal display in various areas of a web site.
Scalable vector graphics are vectors which mean that they scale up or down without any degradation. They look equally great on a tiny watch or a big screen. Vector graphics are ideal for line art, logos, illustrations, charts, diagrams and drawings. Of course, there’s still a place for bitmap image formats. These are best suited for photos and other images with deep color depth. Learn more about differences between vector vs raster graphics.
Dynamic and Animated
SVG can be made on the fly from data, and they can be animated too. With none of the overhead of viewers like Flash, you can create dynamic and interactive experiences. These files can include additional media like sound and audio clips.
Changes are Simple with CSS
SVG is XML-based. These graphics are saved as text files which can be easily edited directly in the HTML, via CSS or with a specialized application. Below is a simple example of the XML code used to create a green star. There are several tools which will create SVG for you. Inkscape is a powerful, free design tool.
In general, SVG is always smaller than the same raster image. When the dimensions of a bitmap image grows, so does its file size. Vectors will remain the same. SVGs save all the geometry, including data and scale. Vector graphics aren’t weighed down by high-overhead information like pixels and dimension. The more pixels and color depth, the larger a bitmap image becomes.
SVG Example Gallery
Below is a series of examples showing the different ways in which SVG can be used. From whimsical cartoons and illustrations to scientific charts or mechanical engineering drawings, SVG is ideal for all types of line art.
More information and examples:
Overview of SVG 1.1 W3C
Recommendation for SVG 2 W3C