PFRE-Logo-white-bg
Reading
blue-triangle-element

Articles

PFRE is the original online resource for real estate and interior photographers. Since 2006, it has been a community hub where like-minded professionals from around the world gather to share information with a common goal of improving their work and advancing their business. With thousands of articles, covering hundreds of topics, PFRE offers the most robust collection of educational material in our field. The history of real estate photography has been documented within these pages.
All Articles
blue-triangle-element

Latest

Image banner for the November 2023 PFRE Photographer of the Month Winner Javier Sotomayor, with a featured image of his winning photo titled "Open"

Congratulations to Javier Sotomayor, November 2023 PFRE Photographer of the Month! The theme this month was "Open." Javier Sotomayor - Entry #879 Dave Koch - Entry #877 Peter Wingfield - Entry #874 Here's what Javier has to say: Hello First of all I wa ...

Contest
blue-triangle-element

OVERVIEW

For over a decade, photographers from around the world have participated in PFRE’s monthly photography contests, culminating in the year-end crowning of PFRE’s Photographer of the Year. With a new theme each month and commentary offered by some of the finest real estate & interior photographers anywhere, these contests offer a fun, competitive environment with rich learning opportunities. 

Contest Rules
blue-triangle-element

CURRENT CONTESTS

View / Submit
blue-triangle-element

PAST CONTESTS

View Archive
Resources
blue-triangle-element

Resources

PFRE prides itself on the depth and breadth of the information and professional development resources it makes available to our community. Our goal is to help real estate and interior photographers be successful while bringing the community together and elevating the industry as a whole.
blue-triangle-element

Conference News

No items found

How to Save as SVG

Published: 22/05/2023

As an Amazon Associate we earn from qualifying purchases.

If you are running a real estate website, you want the images, icons, and illustrations to appear in high resolution, regardless of the display size the viewers are using. Learning how to save as SVG can help you convert the JPEGs to a vector-based format that doesn’t lose quality on scaling.

How to Save as SVG

An SVG file is a Scalable Vector Graphics file, which is a type of image format that is created using mathematical equations rather than pixels. This means that SVGs can be scaled to any size without losing quality, making them ideal for logos and icons.

Additionally, SVGs can be edited using code, which gives you more precise control over the design elements. If you want your real estate website images to be responsive in a way they can adapt to different screen sizes without losing quality, then consider using SVG.

The following guide explains how you can use various programs such as Photoshop, Adobe Illustrator, and online tools to save images or text as SVG.

A silver MacBook Pro with black wallpaper and black mouse pointer hovers the blue logo of Adobe Photoshop

Photoshop

Photoshop provides a wide range of features, including image cropping, resizing, color correction, and compositing using layer-based editing. It also provides advanced tools for creating 3D designs, vector graphics, and animations.

If you want to create an SVG file from a photo after retouching it in Photoshop, go to the File menu at the top left corner of the screen and select Export from the dropdown menu, and then choose Export As from the submenu.

Alternatively, open the exporting window by hitting Alt + Shift + Ctrl + W on your Windows computer or Option + Shift + Command + W on your Mac. In the Export As window, select the format as SVG from the dropdown menu and then choose Export.

How to Export an Individual Photoshop Layer to SVG

Typically, a layer is a transparent plane or container that holds an individual image, graphic, or specific design element. Using layers in Photoshop makes it easier to work on different parts of an image separately without affecting other parts.

If you want to export a layer to SVG, start by selecting the layer you want to save as SVG from the Layers panel on the right-hand side of the screen. Right-click on the selected layer and choose Export As from the window that opens.

Just like in the above steps, choose SVG as the format from the dropdown menu and specify the desired settings for the selected format. Choose the location where you want to save the exported SVG file on your computer, give it a name and click on the Export button to save the layer in SVG format.

What to Do if Saving a File as SVG Isn’t Working In Photoshop

Saving a file in SVG format may be an issue, particularly if you are using newer versions of Photoshop. However, you can try the following tips if the SVG format does not appear in the dropdown menu

  • Go to Edit, choose Preferences, and then Export. Activate the Use Legacy Export As option by clicking inside the box near it. This makes the SVG option appear in the list of formats
  • If you want to save a text layer as SVG, right-click on it and then choose Convert To Shape.
  • An icon will appear at the bottom right of the thumbnail, indicating a successful conversion. Typically, you can be able to save the text as SVG after converting it to shape
Black wallpaper with the yellow Adobe Illustrator logo near a blue and white Zoom logo

Adobe Illustrator

Adobe Illustrator is a vector graphics editor that you can use to create illustrations, logos, and icons. The best thing about Illustrator is that the quality of artwork it creates is independent of the resolution at which it is displayed, meaning that any image it creates can be enlarged or reduced without losing its quality.

Open the real estate photo that you want to save as SVG in Adobe Illustrator, navigate to the File menu, and then select Save As. Choose a location to save your file on the computer. In the Save As Format dropdown, select SVG and then click on the Save button.

In the SVG Options dialog box that opens, you can choose the settings you want for your SVG file. Select the SVG profile, choose whether to embed images or fonts and set the location of images and CSS. Click on the OK button to save your file.

Online Conversion Tools

Online conversion tools are web-based applications that can allow you to convert files from one format to another. Most of these online tools are free and do not require software download or technical expertise to use.

  • Open an online conversion tool like CloudConvert or Online Convert
  • Click on the Choose Files or Select Files button on the website to upload your file
  • Select the output format as SVG from the dropdown list of the available formats
  • Set any additional options like file compression or image scaling if the converter allows you to do so
  • Click on the Convert or Start Conversion button to initiate the conversion process
  • Once the conversion process is complete, download and save the SVG file to your computer

Keep in mind that some online conversion tools may have limitations on file size or format. Uploading and downloading files over the internet can also be slow and prone to errors.

Browser

A browser is a software application that allows you to access and navigate the internet. Some popular browsers include Google Chrome, Mozilla Firefox, and Safari. Although they lack built-in functionality to save an image in different formats, there are some browser-based plugins and extensions that can help you to save an image as an SVG file.

Start by opening a browser extension such as SVG Export for Google Chrome. Install it in your browser and then click on its icon on your browser toolbar to activate it. If you are using Google Chrome, go to the three dots on the upper right-hand side, choose More Tools, and select Extensions.

Toggle the button next to the SVG Export extension to turn it on if it's not activated by default. This tool allows you to search for SVG files on websites and export them as SVGs or even convert them to pixel-based formats such as JPEGs.

A person wearing a white shirt and white pants is using a black Dell laptop

Related Questions

Can I Use the SVG Crowbar Browser Extension to Save a File as SVG?

Yes, the SVG Crowbar is among the most popular browser extensions you can use to save a file as SVG. It's versatile and works with Chrome, Firefox, Safari, and Opera browsers. Once installed, it provides a button in the toolbar that allows you to download SVG graphics from the page you're browsing.

How Can I Export SVG Files Using Image Assets?

Double-click on the name of the layer you want to save as SVG, add svg at the end of its name, and then press Enter to rename it. Go to File, select Generate, and then choose Image Assets to enable it. Again, go to File, select Save as, and then set the format to SVG. Click on the Save button.

What Is the Difference Between PNG and SVG?

PNG is a binary image format that can handle graphics with semi-transparent and transparent backgrounds. It also uses lossless compression to represent pictures as pixels. SVG, on the other hand, is a vector-based image format that is represented by a set of mathematical equations.

Final Thoughts

Knowing how to save as SVG can help you keep your website images responsive to the display size of the devices. Generally, you can save an image as SVG by converting it using Photoshop, Adobe Illustrator, browser extensions, or online conversion tools.

Vendors

Rela Logo
CS6 PSE Logo
HD Photo Hub Logo
FullFrame Logo

Learning Topics

.
magnifiercrossmenucross-circle