How to Create SVG Images

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. Image titled Create Svg Images Step 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. Image titled Create Svg Images Step 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. Image titled Create Svg Images Step 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. Image titled Create Svg Images Step 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. Image titled Create Svg Images Step 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. Image titled Create Svg Images Step 6
    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. Image titled Create Svg Images Step 7
    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. Image titled Create Svg Images Step 8
    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. Image titled Create Svg Images Step 9
    4
    Click the File tab. This is located in the top-left corner of the screen.
  5. Image titled Create Svg Images Step 10
    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. Image titled Create Svg Images Step 11
    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. Image titled Create Svg Images Step 12
    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. Image titled Create Svg Images Step 13
    8
    Click Save. Your image will now be available to use as an SVG file.
    9. Advertisement

You Might Also Like

Convert Pictures To JPEG5 Simple Ways to Convert Pictures to JPEG
Save Images to PNG Format
How to
Save Images to PNG Format
Convert JPG to PNG4 Free Ways to Convert JPG to PNG
Convert JPG to BitmapHow to Convert JPG to Bitmap on Windows and Mac
Convert JFIF to JPG
How to
Convert JFIF to JPG
Add Gif on Telegram on iPhone or iPad8 Easy Steps to Add GIFs on Telegram in Messages
Convert an Image to Svg on PC or Mac
How to
Convert an Image to Svg on PC or Mac
Unblur an ImageHow to Unblur an Image with Photoshop, GIMP, or Alternatives
Convert PDF to GIF
How to
Convert PDF to GIF
Change JPEG to GIF
How to
Change JPEG to GIF
Convert Raster to Vector
How to
Convert Raster to Vector
Convert a JPEG to a Silhouette Cut‐Out
How to
Convert a JPEG to a Silhouette Cut‐Out
Advertisement

References

  1. ↑ https://helpx.adobe.com/illustrator/using/svg.html

About This Article

wikiHow Staff
Co-authored by:
wikiHow Staff
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