EazyDraw Svg Export Panel EazyDraw Svg Scale Icon

SVG Export

The mnemonic SVG stands for Scalable Vector Graphics. It is a vector graphics format, as compared to a bitmap graphic format. It is text-based and human readable, the content format is similar to the web page HTML format.

Scalable Vector Graphic format, an open standard vector format. This is a text file format, the output is human readable. The content is formated in accordance with a set of encoding rules called XML (Extensible Markup Language). The output resembles HTML, using start tags and end tags to define vector graphic elements. SVG is now supported and displayed by most browsers (except Microsoft’s Internet Explorer) and is required for posting diagrams to Wikipedia.

SVG is an XML (Extensible Markup Language) language (or application). SVG is an "open" format published, defined, and maintained by the W3C (World Wide Web Consortium). Complete information and documentation for the format is available on the Web and there several technical publications available for in-depth study.

SVG can be used to exchange drawings between applications, or for content publication of web based graphics. There is a defined reduced scope format for use with resource limited hand-held devices (this format is defined as a "profile" called SVG TINY. EazyDraw supports all defined SVG profiles.

This panel is accessed from the File menu, the Export selection. Use the top left popup menu found on the Export Panel to select "SVG" for the file format.

Select the desired profile with the SVG Profile popup menu. In most cases "SVG 1.1" is the correct choice. The "Tiny" profile is for small hand-held devices such as mobile phones, and the Basic profile targes mid-range devices such as iPads. The Tiny format is not able to represent gradients and shadows and text will not be as readily editable. The full 1.1 format should be used to exchange drawings with other drawing applications.

The Embedded images controls the handling of bitmap graphic images that are part of the original drawing. If your drawing contains a JPG image, this image is "passed" as a JPG image, other images (with transparency) are converted to the PNG format. These images may be saved as part of the main drawing file (Embedded) or they may be saved as stand-alone files, in the same folder, that are linked to the SVG drawing. Linking has advantages for web page design as the images may be shared with other drawings, and the drawing file’s size will be smaller and more "readable". Embedded images are text encoded as base64 text blocks. See below for more detail about using linked image files.

Tidy Formatting is used to make the svg drawing more readable in a text editor. Nested XML elements are indented and larger attribute strings are placed on individual lines. This adds some length to the drawing file. Tidy Formatting is not needed unless the SVG drawing will be viewed in a text editor.

DOM (Document Object Model) ID’s - when checked, each element in the SVG output will have a unique ID attribute. This is not a required property of the SVG standard, at this time. These ID’s can be helpful when other software is used to access or manipulate the drawing as XML content. It also helps the readability of the drawing file, as the ID’s often contain wording that indicates the graphic’s usage. Some ID’s are required by the SVG standard, these are always included even if the DOM ID option is not checked. Checking this option will increase file size by a small amount.

Text content will depend on the choice for the Font parameter. The SVG selection will save text content as Text strings, the client (in this case EazyDraw is the "server" an application that will read or display the SVG drawing is the "client") application will receive Text as editable Text content. The choice of Outline will convert all text to Bezier graphic paths, this means the client application will not be able to access and edit the Text. The benefit of choosing Outlines is that the client does not need to use a Font to interpret the text layout properly display the text characters (Glyphs). The Outline choice will result in more precisely positioned and formatted text, but text editing will not be possible. SVG font (with the System Font selection for Glyphs) will result in a smaller file size.

Glyphs are the building blocks of a "Font". The SVG standard provides a mechanism to include your Fonts as part of the drawing file. To understand this option consider the case that where a font is used to create the drawing that might not be present on the system where the SVG drawing is used, perhaps the Font used is a "Mac" font and the receiving user is on a Linux system. The System Font selection means that text is defined as using a named font, then the receiving application will use a the corresponding font on the receiving system. If you choose to include the font in the drawing there are choices to include the entire font (which could lead to a very large file size) or just the Glyphs used in the drawing.

Pixels: This parameter is set on EazyDraw Preferences , the setting applies to export and import for SVG. The SVG format supports the use of defined units, such as inches, mm, or points. The format also defines the size of a pixel, but the definition is somewhat inexact as it relates to viewing angles and length of the eye from the image. This is generally reduced to a pseudo defined value of 0.28 mm or 1/90 inches, for a computer screen. There is the competing convention that assumes (as always a problematic word) the size of a pixel to be equivalent to on Point, a defined unit of measurment (1 / 72 inches). SVG authoring applications and SVG viewers will generally use one of these two conventions. You may elect the "assumed" size of a pixel to be 72 per inch or 90 per inch with the popup menu provided. This choice will change the size of the exported drawing of a factor of exactly 0.8 (1.25 inverse).

SVG editior for macOS and OS X on Apple Silicon with M1 processor.

The SVG format is extensively documented on internet-web. Details and specifications are available on the W3C web site SVG Page . This page provides a information on the format and links to several other resources to learn more about SVG.

The EazyDraw SVG export is a full implementation, all EazyDraw graphic elements are mapped to SVG content. Where possible SVG abstractions are implemented. If an EazyDraw graphic element is not representable as a SVG element or attribute, the EazyDraw graphic is generated using SVG primitive graphic elements. For example, a simple linear gradient has a SVG representation and the representation is used in the SVG exported drawing. But a Conic Gradient does not have a SVG representation; in this case the gradient is generated as a series of small elongated triangle fills. Another example is Arrows (defined as Markers in SVG), some EazyDraw arrows can be represented as Markers, but "Arrows - Along" are drawn as basic Bezier paths in the SVG drawing.

Linked Imgages: If a SVG file is imported, and if it contained linked images, these links are conserved and saved in the EazyDraw master original drawing file. The links may be inspected using the Easy Look inspector. They are found under the Properties 2 column. Upon export the same links will be used if Embedeed Images is unchecked. If the Overwrite checkbox is unchecked, and if the image file already exists then EazyDraw will not write out the linked image. This allows a master library of images to exist without fear of accidental modifications.

Linked Imgages: If a graphic is given or has a name and does not have a link, then the name is used for the external linked file. The image is then found in the same directory as the SVG image. The name for a graphic is inspected (viewed, created, and edited) using the Easy Look palette, accessed from the Format main menu.

Linked Imgages: Links may be enetered using the Easy Look palette. Enter the link into the Properties 2 field for the image. An entry in the Link field takes precedence over an entry in the Name field. A Link entry may be relative to the SVG exported drawing’s directoy, these specificaions are Unix file system specifications, dot represents the current directory, dot-dot-slash moves up one directory (folder). If more information on this is needed, refer to information about Unix. A Name does not support a relative path entry, use the Link field for this.

Linked Imgages: Links will round-trip upon import and export. This means they may be edited and managed with a normal text editor in the SVG file. Or they may be edited with a text editor and the EazyDraw graphic representation file (or a PList editor).