A simple guide to create SVG files in Adobe Illustrator and online converters

Scalable vector graphics (SVG) allow for more interactive elements on webpages without using as much bandwidth as other image formats like JPEG or GIF, making them ideal for web design.[1] Some digital illustration programs, like Adobe Illustrator, offer SVG options and there are online SVG converter websites that are free to access. This wikiHow shows you how to create your own SVG images.

Things You Should Know

  • You can upload a JPG file to Convertio to convert it to the SVG format.
  • If you have Adobe Illustrator, you can create custom vector graphics and export them as SVG files.
  • Adobe Illustrator also lets you apply SVG filters to individual layers in your project.
Method 1
Method 1 of 2:

Using a JPG to SVG Converter

  1. 1
    Open your Web browser and go to https://convertio.co/jpg-svg/. This takes you to the page for Convertio’s JPG to SVG Converter, which is free to use.
  2. 2
    Select the source for your JPG image. At the top of the converter menu, you should see a red toolbar listing different sources you can access to upload a JPG image file to be converted to SVG.
    Advertisement
  3. 3
    Navigate to the file you want to convert. Once you’ve selected a source, a dialog box should pop up with the library of your computer’s folders. From there, navigate to the folder with the file you want to convert and select the file.
  4. 4
    Click Convert. Once the file has been uploaded, a red button will appear in the lower-right corner of the menu screen. This will start the conversion process, which may take a few minutes depending on the file size.
  5. 5
    Click Download. Once the file is done being converted, a blue button will appear to the right of the file name in the Converter menu. Once you click it, the image will then be downloaded onto your computer as an SVG file.
  6. Advertisement
Method 2
Method 2 of 2:

Using Adobe Illustrator

  1. 1
    Open Adobe Illustrator. Adobe Illustrator is a graphic design app that lets you create your own art using a variety of tools and features.
  2. 2
    Create your image. Once you have Illustrator opened, you can select any of the tools in the toolbar on the left side of the screen to get started with designing your image.
  3. 3
    Apply SVG effects to certain layers of your image. If you want to add any custom effects to your image, you can select a layer and then click Effect > SVG Filters > Apply SVG Filter. Then, just click the Edit SVG Filter button, edit the default code, and click OK to save your SVG effects.
  4. 4
    Click the File tab. This is located in the top-left corner of the screen.
  5. 5
    Select Export in the menu. To have your SVG file ready for viewing and using outside of Illustrator, you'll need to export it.
    • You can also select Save As..., though this will save the file so that it can only be viewed and edited in Illustrator.
  6. 6
    Click Export As.... This pulls up a new menu where you can export the file from Illustrator into the format of your choice.
    • You can also select Export for Screens... to have your SVG image saved in a way that can be accessed on iOS or Android devices.
  7. 7
    Select SVG in the list of file types. Illustrator offers a variety of file types for you to choose from, including web-ready SVG files.
  8. 8
    Click Save. Your image will now be available to use as an SVG file.
  9. Advertisement

About This Article

wikiHow Staff
Co-authored by:
wikiHow Staff Writer
This article was co-authored by wikiHow Staff. Our trained team of editors and researchers validate articles for accuracy and comprehensiveness. wikiHow's Content Management Team carefully monitors the work from our editorial staff to ensure that each article is backed by trusted research and meets our high quality standards. This article has been viewed 85,252 times.
How helpful is this?
Co-authors: 3
Updated: October 25, 2022
Views: 85,252
Categories: Image Conversion
Article SummaryX

1. Open Adobe Illustrator.
2. Create your image.
3. Apply SVG effects to layers.
4. Save your image as an SVG file.

Did this summary help you?
Advertisement