Convert your logotypes into SVG

Last Updated: Aug 05, 2016 04:29PM CEST

In this article

    Logotypes are usually created vectored through e.g Adobe Illustrator or similar programs that handles creation of vector graphics well.

    Vectored images are often saved as .ai or .eps files which are the default work-files. Vector images may also be saved as PDF or SVG right away.

     

    Exporting to SVG with Adobe Illustrator

    Creating SVGs aren't as hard as one might suspect, in fact it really is super easy if you got access to the work files.

     

    Start out by opening up your logotype or vector graphic in Adobe Illustrator.

     

     

     

    Once the logotype is loaded to the scene, select it and open the artboard window.

    It is usually found in the right collapsed panel and has this icon:

     

    It may otherwise be displayed by activating it through Window -> Artboards.

     

    When found, click on the small square and artboard options will appear.

     

     

     

    In the Artboard options, click on the Preset list and search for Fit to Selected Art alternatively Fit to Artwork Bounds, either should usually do the trick and make the artwork bounds fit to the art on stage which is what we want as a result.

     

     

     

    It should now look something like this:

     


    When you got the logotype somewhat fit to the artboard, then go ahead and click on File -> Save as...(CTRL+SHIFT+S / CMD + SHIFT + S)

    For versions prior to Adobe Illustrator CS6 and Adobe Illustrator CC then you might have to go to Save for web...

    Choose where to save it to and to it save as SVG.

    A SVG options window will appear when clicking on Save.

    Below are some recommended settings to achieve the best results.

     

     


    If you are using Adobe Illustrator CC, make sure that the option Responsive is unchecked.

     

    SVG's file-size is usually desired to be below 15kb.

    You can optimize the SVG further by using this webtool: http://petercollingridge.appspot.com/svg-optimiser

     

    Exporting to SVG with Inkscape

    Inkscape is a free vector graphics software that can be downloaded to all platforms here http://www.inkscape.org/en/download/.

    Inkscape can not import .ESP files so in case that's what your logotype is, then go to this website and convert the ESP to SVG and you'll be able to import it.https://cloudconvert.org/eps-to-svg

     

    Select the logotype on the artboard and got File -> Document properties.

     

     

    Click on "Resize page to drawing or selection" to make the artboard fit to the graphics.

     

    You can close that windows once you see that the artboard has resized itself.

    You can now save the image as SVG by going to File -> Save as and then save it as a SVG.

    Either choose Inkscape SVG, Plain SVG or Optimized SVG. It may be good to experiment with them in order to get the best results as it sort of differ from image to image.

    support@bannerflow.com
    https://cdn.desk.com/
    false
    desk
    Loading
    seconds ago
    a minute ago
    minutes ago
    an hour ago
    hours ago
    a day ago
    days ago
    about
    false
    Invalid characters found
    /customer/en/portal/articles/autocomplete