There are advantages to using SVG over the more popular PNG or JPEG when working with technical documents online. SVG retains the clarity of the original drawing and can be inserted easily into an HTML5-compliant web page. CorelDraw (my preferred vector-editing program) has long been able to export to SVG. This brief tutorial will focus on exporting a simple CorelDraw technical diagram to SVG and inserting the code using the svg tag.
To export a drawing to SVG in CorelDraw X3:
1. Select a grouped drawing using the Pick Tool. The example below is a vector drawn MP3 player with callouts.
*Illustration drawn and designed by the author.
2. Click File then Export.
3. In the Save as type: list, select SVG-Scalable Vector Graphics
4. Select the Selected only check box. Click Export.
5. In the SVG Export window, CorelDraw will have an Issue tab to inform you of any problems exporting to SVG. The most common issues are the Non-RGB colors present in the drawing and bitmap images in the illustration.
The MP3 player illustration actually doesn't have any bitmap images even though CorelDraw issued a warning so the only concern in this example should be the use of CMYK colors.
6. In the SVG Export General tab, use UTF-8 and Internal Style Sheet for the Encoding Method and Styling Options items respectively.
To keep the SVG file to a single file, select As Curves in the Export Text box. Otherwise, fonts would have to be embedded and would increase file size. The only text in the MP3 drawing are the number callouts so it's unnecessary to include a character subset.
Since the MP3 player drawing in this example is completely vector-based, there shouldn't be any bitmaps included or linked with the SVG file. However, if the Corel Draw illustration does have a bitmap included in the design, select Link Image or Embed Images as needed.
Click OK to export illustration.
7. To preview the SVG file in a browser, open the SVG file using an updated version of Google Chrome. Chrome supports SVG rendering natively. If there are parts of the drawing missing, check if you selected all the parts of the illustration before exporting. Depending on the design, ungroup or group the objects.
To add an SVG file to an HTML5 web-page:
1. There are several ways to place the SVG into a web page, such as using a div or section tag or linking the file. However, non-designers (like me) just want the SVG placed into the code and positioned using CSS3.
2. A simple way to add the SVG is to open the SVG file using a text editor. In the example below, Notepad++ for Windows is used to edit the markup. Note that this earlier version of Notepad++ doesn't highlight the svg tag in the code.
3. In the SVG file, copy the code beginning from the note "Creator: CorelDraw" down to the svg close tag. The essential code is just below the XML declaration.
4. Paste the SVG code into the HTML file. Save the HTML file and preview in a supported browser. Note that Microsoft Internet Explorer 8 does not support the svg tag. The screenshots below show Mozilla Firefox 10.x and Google Chrome version 24.x.
0 comments:
Post a Comment