drawsvg iconDRAWSVG user's guide
PreviousNextContentsPDFdrawsvg home

3.3. Open a document

This function is available from the document menu .

Item Description
Image icon-open.svg

With this function you can load a SVG document from different sources :

  • from a svg file on your hard drive

  • from a image file on your hard drive

  • from a image found on the WEB

  • from a web URL

  • from the freesvg gallery

  • By entering the SVG code by copy and paste

3.3.1. Loading a SVG file

Check the SVG file source radio button. Select the svg file with the browse button and load it.

Figure 3.2. Loading a SVG file

Loading a SVG file

If the document does not contains html audio/video controls, and if its size is different than (100%,100%), then the document can be edited :

  • with its real size, and scrollbars if needed

  • or with an adjusted size to the drawsvg window.

Otherwise, the document is edited with its defined size and this option is disabled.

3.3.2. Loading an image file

This mode allows to set an SVG from an image file. The dimensions and the coordinate system of the document are identical to the image.

Check the image file source radio button. Select the image file with the browse button and load it.

Figure 3.3. Loading an image file

Loading an image file

The image can be embedded in a separate layer or as a background image. The document dimensions are set by default to (100%,100%) or otherwise the same as the image in pixels.

3.3.3. Loading an image from the WEB

This mode allows to set an SVG from an image found the web. The dimensions and the coordinate system of the document are identical to the image.

Check the image WEB source radio button. Search the image on the WEB with the browse button and load it.

Figure 3.4. Loading an image from the WEB

Loading an image from the WEB

The image can be embedded in a separate layer or as a background image. The document dimensions are set by default to (100%,100%) or otherwise the same as the image in pixels.

In the search dialog box, enter one or more keywords and then to load an image, make the "open" button appear by moving the mouse over the image or by clicking on it. Finally, click on the "open" button of the image to load it.

Figure 3.5. Browse images on WEB

Browse images on WEB
Browse images on WEB

3.3.4. Loading an URL

Check the url source radio button. Copy the URL of an SVG document from the browser to the edit field. Then view the URL and load it.

For example, to load https://drawsvg.org/drawsvg/samples/svg/mapmonde.svg

Figure 3.6. Loading a SVG URL

Loading a SVG URL

If the option save is checked, when saving, DRAWSVG will suggest to update the resource with an HTTP PUT Request with the document contents.

Figure 3.7. Saving a SVG URL

Saving a SVG URL

3.3.5. Loading a svg from freesvg gallery

FreeSVG is a well known WEB site with a lot of SVG files free to use. You can search documents in the gallery with tags, author names.

DRAWSG has a navigation GUI in the gallery of FreeSVG that lets you edit it's documents directly.

The source is only available with the expert profile.

Check the freesvg source radio button. Query the gallery, browse documents, look them and load the selected one.

Figure 3.8. Loading a SVG from Freesvg gallery

Loading a SVG from Freesvg gallery

See showcase load freesvg document

Note

This feature is not currently supported by the freesvg server.

3.3.6. Load a SVG code

This mode allows you to enter the code of an svg document.

Check the code source radio button. You can enter the code by copying and pasting from your editor it.

Figure 3.9. Loading SVG code

Loading SVG code

SVG Code Example

          
		<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="100%" height="100%"
		viewBox="0 0 320 512" preserveAspectRatio="xMidYMid meet">
		<path d="M0,55v371c0,12,10,22,22,22,6,0,12,-3,17,-8l83,-95,58,116c8,16,27,22,43,14s22,-27,14,-43l-57,-114
		h118c12,0,22,-10,22,-22,0,-6,-3,-12,-7,-17l-274,-243c-4,-4,-10,-6,-15,-6,-13,0,-23,10,-23,23Z"/>
		</svg>