SVG, also known as Scalable Vector Graphics is a term and a file format type that pertains to a two-dimensional based vector graphic which allows designers to display their vector images on the web. Animators very much appreciate it as it possesses qualities that make the images saved in this format to be animation possible.
If you are after saving your file or graphic two-dimensional based vector graphics in the SVG file format, here is how to go about it.
Key takeaways
- First convert your file from Photoshop to Adobe Illustrator, and then resave that file from Adobe Illustrator to an SVG file.
- Make sure that the SVG profile is SVG 1.1.
How-to: A step-by-step instruction on how to save as SVG
Step 1: Create a blank canvas
The first step is to get your canvas set for work. Scroll up to the left-hand side of the screen to click on Files. In the drop-box produced, click New, fill in the requirements and dimensions, and click Ok to save. Your blank canvas is ready for work.
Step 2: Select a shape tool
Pick the rounded rectangle tool located under shape tools, and create a rounded rectangle with a red color fill.
Step 3: Draw a circle on the rounded rectangle
After drawing your rounded rectangle, return to the shape tools once more, and pick an Ellipse tool to create a circle with a red fill in it right above the rounded rectangle.
Step 4: Close the background layer
Once you complete creating the shapes on the two new layers, you’ll need to close the background layer. Head to the Layer box on the right-hand side of the screen; click the Background layer. There is the “eye” symbol right on the layer; click on it to close it. Once completed, a padlock symbol appears on it.
After closing the background, proceed to select/highlight the rounded rectangle layer and the ellipse layer since those are the needed ones. To select each of the layers, press Ctrl and click on each item designed to select/highlight them.
Step 5: Select File
After selecting every designed item, proceed to Files, and a dropbox appears with commands. Click on Export, and on the smaller dropbox generated, click on Path to illustrator.
Step 6: Export path to files
After clicking on Path to illustrator, a dialogue box appears showing Export paths to file, choose what path to export to with relations to each layer you worked on.
Step 7: Export path to files (Continued)
Once the dialogue box comes up with its options on paths, click on the option tray. There you’ll see options about each layer singled out, and you’ll also find the All paths option.
Step 8: Completing Export Paths to file
After clicking on your selection of All paths, as seen in the previous step, press Ok to confirm your selection.
Step 9: Saving the selection
After concluding your path selection, the next thing to do is to save your selection. Save it in Desktop and rename it as you desire. Here for the example, the file name for the saving is Practice and then click Save. By doing this, you are saving the image as an illustrator file.
Step 10: Open Adobe Illustrator
For graphic designers who have the full Adobe package on their laptops, you will find Adobe Illustrator to install and use. Go to your Adobe Illustrator, click on File and open the illustrator document earlier saved on the Desktop with the file name Practice.
Step 11: Open the file
Once you click on open, your initially saved file under the Adobe Illustrator of a rounded rectangle with a red fill and an ellipses circle with a red fill appears on the Adobe Illustrator for you to check out.
Step 12: Resave your file
After checking out your image, proceed to Files, click on Save as. A dialogue box appears.
Step 13: Saving your image
After you click on Save as the dialogue box brings out the file name of Practice (Converted), meaning it was converted from Photoshop to Adobe Illustrator. You can retain the title or decide to change the file name as you wish, then click on Save as type. The scroll bar provides options on the types of files. Click on SVG, which is the second to the last on the scroll bar option. Then proceed and click Save.
Step 14: SVG options
Once you click on save, you’ll see another dialogue box with SVG options. On it, you’ll see the SVG profile, which should be SVG 1.1, and the type should be SVG. Click Ok, and the work automatically saves on your desktop as an SVG file.
Related
How to save as PDF in Photoshop
Conclusion
As graphic designing also transcends the realm of designs and goes into other areas of two-dimensional web animation, Photoshop creates a way to save files easily that is convertible for different functions like the SVG. While you may or may not use it often, you must learn how to get around it with the above-stated steps for relevance and understanding.