Create SVG From Image: Free & Easy Guide

by Fonts Packs 41 views
Free Fonts

Hey guys, are you looking to create SVG from image free? Awesome! SVG (Scalable Vector Graphics) is a fantastic format for images, especially when you need them to look crisp and clean at any size. Unlike raster images like JPEGs or PNGs, which get pixelated when you zoom in, SVGs are vector-based, meaning they're defined by mathematical equations. This means they can scale infinitely without losing quality. And the best part? You can create SVG from image free using a variety of tools. In this guide, we'll dive deep into how to convert your images into SVGs, completely free of charge, exploring different methods and tools to suit your needs. We'll cover everything from online converters to software installations, ensuring you have all the knowledge you need to create beautiful, scalable graphics.

Create SVG from Image Free: Online Converters - The Quick and Easy Route

One of the easiest ways to create SVG from image free is by using online converters. These tools are readily available, user-friendly, and often require no installation, making them perfect for a quick conversion. You simply upload your image, select your desired settings, and download the SVG file. Many online converters offer a range of customization options, allowing you to adjust the level of detail, colors, and other aspects of the conversion. This can be particularly useful if you want to optimize the SVG file size or fine-tune the appearance of the final image. These tools are usually web-based, which means you can access them from any device with an internet connection, whether it's your laptop, tablet, or even your phone. This level of accessibility makes online converters a convenient option for anyone who needs to quickly convert an image to SVG format.

When choosing an online converter, consider factors such as the supported image formats, the quality of the conversion, and the available customization options. Some converters offer advanced features, such as automatic tracing, which can help to create more accurate and detailed SVGs. Others may provide options for color quantization, which can reduce the number of colors in the SVG and further optimize the file size. Before converting your image, it's a good idea to familiarize yourself with the settings available in the converter. Pay attention to options such as the trace method, which determines how the image is converted to vector paths, and the simplification settings, which can reduce the number of points and curves in the SVG to optimize the file size and performance. By taking the time to understand these settings, you can ensure that you get the best possible results from your conversion.

One of the key benefits of using online converters is their speed and simplicity. The entire process, from uploading your image to downloading the SVG file, can often be completed in a matter of minutes. This makes them a great choice when you're in a hurry or when you need to convert a large number of images quickly. Many online converters also offer previews of the SVG output, allowing you to see how the final image will look before you download it. This can be a valuable feature, as it allows you to make adjustments to the settings if needed. In addition to their ease of use and speed, online converters are also often free of charge. This makes them an accessible option for anyone who needs to convert images to SVG format, regardless of their budget or technical expertise. With the availability of numerous free online converters, you can easily find a tool that meets your specific needs and provides excellent results.

Top Free Online SVG Converters

There are several excellent free online SVG converters available. One popular choice is Vectorizer.io, which supports a wide range of image formats and offers various customization options. Another great option is OnlineConvertFree, known for its user-friendly interface and quick conversions. Convertio is also a reliable choice, providing a clean and simple way to convert images to SVG. Each of these converters offers unique features and capabilities, so it's a good idea to try a few different ones to see which one best suits your needs and preferences. When choosing an online converter, make sure to consider factors like ease of use, conversion quality, and the availability of customization options.

Create SVG from Image Free: Desktop Software for Advanced Users

For those who need more control and customization options to create SVG from image free, desktop software is the way to go. These programs offer advanced features, such as manual tracing, color adjustments, and path editing, allowing for precise control over the final SVG output. While this approach may require a bit more learning, the results are often superior, especially for complex images or those requiring specific modifications. Many of these software options are free to download and use, making them accessible to anyone, regardless of their budget. By using desktop software, you can unlock a range of powerful tools that enable you to create professional-quality SVGs tailored to your exact specifications. Desktop software provides a more in-depth experience compared to online tools, providing the best results.

One of the main advantages of using desktop software is the ability to perform manual tracing. This allows you to trace the outlines of your image by hand, creating precise vector paths that accurately represent the original artwork. Manual tracing gives you complete control over the shape and appearance of your SVG, allowing you to eliminate unwanted details, simplify complex shapes, and optimize the file size. Another significant benefit is the ability to edit and modify the vector paths. You can adjust the curves, angles, and anchor points of each path, fine-tuning the appearance of your SVG until it meets your exact requirements. Desktop software also offers a wide range of color adjustment options, including color quantization, gradient creation, and color palette manipulation. With these features, you can easily modify the colors of your SVG, create stunning visual effects, and optimize the file size. Desktop software gives you more control over the process, resulting in high-quality results.

Another key advantage of using desktop software is the ability to work offline. Unlike online converters, which require an internet connection, desktop software can be used at any time, regardless of your internet access. This can be particularly useful if you need to create SVGs in a remote location or when your internet connection is unreliable. With desktop software, you can also save your project files and return to them later, allowing you to make changes and refinements as needed. This can be a great time-saver, especially when you're working on complex or time-sensitive projects. Furthermore, desktop software often includes advanced features such as batch processing, which allows you to convert multiple images to SVG format simultaneously. This can significantly speed up your workflow, especially if you have a large number of images to convert. With the range of powerful features and capabilities offered by desktop software, you can take your SVG creation to the next level.

Recommended Free Desktop SVG Editors

Inkscape is a fantastic, free, and open-source vector graphics editor that's perfect for creating and editing SVGs. It offers a wealth of features, including manual tracing, path editing, and a user-friendly interface. Another great option is Vectr, a web-based and desktop-compatible vector graphics editor that's easy to use and ideal for beginners. Both Inkscape and Vectr are incredibly powerful, providing you with all the tools you need to create and manipulate SVGs with precision and ease. These software packages allow you to have the best results.

Creating Scalable Vector Graphics: Understanding the Basics

Before you dive into how to create SVG from image free, it's helpful to understand the basics of SVG. SVG is a vector image format based on XML, meaning it uses mathematical equations to define shapes, lines, and colors. Unlike raster images, which are composed of pixels, SVGs can be scaled to any size without losing quality. This makes them ideal for logos, icons, illustrations, and any graphics that need to look sharp on various devices and displays. SVGs offer exceptional clarity, flexibility, and efficiency compared to raster images, making them the preferred choice for many design and development tasks. Understanding how SVG works helps you to make informed decisions about the conversion process and optimize your graphics for the best possible results.

One of the key advantages of SVG is its scalability. Because SVG images are based on mathematical equations, they can be scaled to any size without pixelation. This is particularly important in today's world, where images need to look good on a wide range of devices, from small smartphones to large high-resolution displays. Another significant benefit is the ability to edit SVG files. Unlike raster images, which require specialized software for editing, SVG files can be opened and edited using text editors or vector graphics editors. This allows you to make changes to the shapes, colors, and other elements of the SVG file without loss of quality. SVG also offers smaller file sizes compared to raster images, especially for images with simple shapes and colors. This is because SVG files only store the mathematical equations that define the image, rather than storing the pixel data.

Understanding the SVG format is crucial for creating and working with these graphics. It's a markup language based on XML that describes images in a vector format. The basic building blocks of an SVG image include paths, circles, rectangles, and text, all defined using XML tags. Each element has attributes that specify its properties, such as color, fill, stroke, and size. When you open an SVG file in a text editor, you'll see the XML code that defines the image. This code can be edited to change the appearance of the image. By understanding the XML structure, you can manually modify the SVG code to create custom effects, animations, and interactive elements. This knowledge can be helpful when troubleshooting, optimizing, or creating more complex SVG graphics. The basic building blocks of SVG include the use of paths to define complex shapes, circles for circular elements, rectangles for rectangular elements, and text for displaying text. These elements can be combined and manipulated to create complex images.

Key Components of SVG

SVGs use paths, shapes (like circles and rectangles), text, and other elements to represent images. Understanding these components is crucial to create SVG from image free and effectively. The <path> element is the most versatile, allowing you to draw complex shapes. Shapes like <circle>, <rect>, and <polygon> are also common. Text is added using the <text> element. These elements are defined using XML-based code, making SVGs easily editable and scalable.

Choosing the Right Image for SVG Conversion

Choosing the right image is critical to successfully create SVG from image free. Not all images are equally suited for SVG conversion. Simple images with clear lines, distinct colors, and minimal details typically convert the best. Complex images, such as photographs, may result in overly complex SVGs with large file sizes or may not convert well at all. It is important to consider the source image's characteristics before starting the conversion process. Images with a high contrast between the foreground and background often yield better results. This helps the conversion software to easily identify the shapes and lines in the image. Choosing images that are relatively uncluttered and simple will typically lead to cleaner and more optimized SVG files. This not only makes the SVG file smaller but also easier to edit and manipulate. By carefully selecting the images you convert, you can ensure that your SVGs are of high quality and visually appealing.

Before converting an image, take some time to evaluate its suitability for SVG. Consider the complexity of the image, the number of colors, and the level of detail. If your image is a photograph or a complex illustration, it may not be the best candidate for SVG conversion. In these cases, you may want to consider using a different format, such as JPEG or PNG. However, if your image is a logo, icon, or illustration with simple shapes and colors, SVG is an excellent choice. Also, you should consider the image's resolution and size. For the best results, use a high-resolution image. This will provide the conversion software with more data to work with and can lead to a more accurate and detailed SVG file. You should also consider the use case of the SVG file. If you plan to use the SVG file on a website or app, optimize it to be as small as possible, while still maintaining good visual quality.

Ideal Image Characteristics for SVG Conversion

Images with distinct shapes, clear lines, and limited colors are ideal for converting to SVG. Logos, icons, and simple illustrations work best. Avoid complex photographs or images with gradients, as these may not convert well and can result in large file sizes. Choosing the right image characteristics beforehand will ensure you create SVG from image free effectively.

Step-by-Step Guide: Converting Images to SVG

So, you're ready to create SVG from image free? Let's walk through the general steps involved. The process varies slightly depending on the tool you choose, but the basic principles remain the same. First, upload your image to your chosen converter. Then, adjust the settings to optimize the conversion. These settings might include the trace method, the number of colors, and the simplification level. Finally, download the resulting SVG file. Be sure to check the quality of the converted image and make adjustments if necessary. This step-by-step guide will help you navigate the conversion process, whether you're using an online converter or desktop software. Following these steps will guide you to creating successful SVG images.

Begin by selecting the right tool for the job. If you need a quick conversion, an online converter will be the easiest option. If you need more control over the conversion process, desktop software is a better choice. Once you have selected your tool, upload your image. Most converters support a variety of image formats, such as PNG, JPG, and GIF. After uploading the image, adjust the settings to optimize the conversion. This may involve selecting the trace method, adjusting the number of colors, and setting the simplification level. The trace method determines how the image is converted to vector paths. You can choose from options such as edge detection, centerlines, or tracing. The number of colors determines how many colors are included in the resulting SVG file. The simplification level determines how many points and curves are used to define the vector paths.

Detailed Conversion Steps

  1. Choose Your Tool: Select an online converter or desktop software. Remember, to create SVG from image free, research and choose your best tool.
  2. Upload Your Image: Upload your image file (PNG, JPG, etc.) to the converter.
  3. Adjust Settings: Configure settings like the trace method, number of colors, and simplification.
  4. Convert and Download: Initiate the conversion and download your SVG file. Open the SVG file with a text editor or vector graphics editor to view and edit.

Optimizing Your SVG Files for Performance

Once you create SVG from image free, it's important to optimize them for performance, especially if you're using them on a website or in an application. Large SVG files can slow down page load times, so it's crucial to make sure they're as efficient as possible. Optimizing your SVG involves several steps, including removing unnecessary code, simplifying paths, and compressing the file size. This is important when it comes to having good website loading speed and also keeping it simple. By taking the time to optimize your SVG files, you can significantly improve their performance and enhance the user experience.

One of the most effective ways to optimize your SVG files is to remove unnecessary code. Many SVG editors add extra information to the file, such as comments, metadata, and unnecessary attributes. This can bloat the file size without adding any visual value. You can remove this extraneous code using a text editor or a dedicated SVG optimizer tool. Another important optimization step is to simplify the paths in your SVG. Complex paths can significantly increase the file size and slow down rendering. Using an SVG editor, you can simplify paths by reducing the number of points and curves. This can be done manually or by using automated tools. Compressing your SVG file is also essential for optimization. SVG files are text-based, which means they can be compressed using tools like gzip. Compressing the file size reduces the file size without sacrificing visual quality. SVG optimization is an ongoing process. As you work on your SVG files, keep these optimization techniques in mind to ensure that they perform at their best.

Tips for SVG Optimization

  • Remove Unnecessary Code: Eliminate comments, metadata, and redundant code.
  • Simplify Paths: Reduce the number of points and curves in complex paths.
  • Compress Your SVG: Use gzip compression to reduce the file size.
  • Optimize Color Palettes: Reduce the number of colors used. By taking these steps, you can ensure that, once you create SVG from image free, you are getting the best performance.

Editing and Customizing Your SVG Files

After you create SVG from image free, you may want to edit or customize them. SVGs are highly editable, allowing you to modify their appearance and functionality with ease. You can use a variety of tools to edit your SVG files, including text editors and vector graphics editors. With a text editor, you can view and modify the XML code that defines the SVG. You can change the colors, shapes, and other attributes of the SVG by editing the code. While this method can be useful for making small changes, it can be time-consuming and complex for more extensive modifications. A vector graphics editor provides a more intuitive and user-friendly way to edit your SVG files. These editors allow you to directly manipulate the shapes, paths, and colors of the SVG without needing to write any code.

Using a vector graphics editor, you can easily modify the shapes, colors, and other attributes of your SVG. You can also add new elements, such as text and other shapes. Many vector graphics editors offer a range of advanced features, such as path editing, gradient creation, and color manipulation. By using these features, you can create complex and visually appealing SVG graphics. When editing your SVG files, it's also important to consider the file size. Larger SVG files can slow down page load times, especially if you're using them on a website. Try to optimize your SVG files by simplifying paths, removing unnecessary code, and compressing the file. With the range of tools available, you can easily edit and customize your SVG files. Whether you choose to use a text editor or a vector graphics editor, the options are endless. Use this ability to create the exact graphics you need.

Essential SVG Editing Techniques

  • Color Changes: Modify fill and stroke colors to alter the image's appearance.
  • Shape Modification: Adjust paths, points, and curves to reshape elements.
  • Adding Elements: Include new shapes, text, or images in the SVG. Knowing these techniques allows you to refine and adjust your images once you create SVG from image free.

Troubleshooting Common SVG Conversion Issues

Sometimes, when you try to create SVG from image free, you may encounter some issues. Let's look at some common problems and how to fix them. One of the most common issues is poor conversion quality. This can happen if the source image is too complex, has too many colors, or is of low resolution. If you're experiencing poor conversion quality, try optimizing your source image or using different settings in your converter. Another common problem is a large file size. This can happen if the SVG file contains unnecessary code or overly complex paths. You can reduce the file size by optimizing your SVG file, removing unnecessary code, and simplifying paths. By understanding the common issues and how to resolve them, you can ensure that your SVG conversions are successful. It takes time, and you may need to use multiple tools to achieve your best result.

If you're getting blurry results or artifacts, try adjusting the settings in your converter or using a higher-resolution source image. It can also be caused by the trace method, so experiment with the different options available. If your converted image is very large in file size, you can optimize your SVG by simplifying paths, removing unnecessary code, and compressing the file. If you are struggling with compatibility, you may need to adjust the code manually or use a more compatible format. Another common problem is compatibility issues. Some SVG files may not render correctly in certain browsers or applications. If you're experiencing compatibility issues, try using a different SVG editor or converter or adjusting the code manually. There are also online validators that can help you identify and fix any errors in your SVG code. By addressing these common issues, you can ensure that your SVG conversions are successful and that your graphics look their best.

Common Problems and Solutions

  • Poor Conversion Quality: Optimize your source image or adjust converter settings.
  • Large File Size: Optimize the SVG by removing unnecessary code and simplifying paths.
  • Compatibility Issues: Adjust code or use a different editor/converter. Ensure that your efforts to create SVG from image free are smooth.

Advanced Techniques: Manual Tracing and Path Editing

For those who want complete control over their SVG graphics to create SVG from image free, mastering advanced techniques such as manual tracing and path editing is essential. Manual tracing allows you to trace the outlines of your image by hand, creating precise vector paths that accurately represent the original artwork. This gives you complete control over the shape and appearance of your SVG, allowing you to eliminate unwanted details, simplify complex shapes, and optimize the file size. Path editing tools allow you to modify the curves, angles, and anchor points of each path, fine-tuning the appearance of your SVG until it meets your exact requirements. This can be a complex process, but the results are often superior, especially for images that require precise detail or have complex shapes.

Manual tracing is a time-consuming process, but the results can be worth the effort, especially for images that require precise detail or have complex shapes. When manually tracing an image, you'll typically use a pen tool in your vector graphics editor to draw the outlines of the shapes and lines in the image. Path editing involves adjusting the curves, angles, and anchor points of each path, which can be a highly precise task. Using path editing tools, you can refine the appearance of your SVG and make it more visually appealing. These techniques are used by professionals, and while they might take some time to master, they allow you to create amazing graphics. With practice and patience, you can develop a deep understanding of SVG, allowing you to create custom effects, animations, and interactive elements. By mastering these advanced techniques, you can take your SVG creations to the next level and achieve professional-quality results.

Key Skills for Advanced SVG Creation

  • Manual Tracing: Precisely trace images to create custom vector paths.
  • Path Editing: Modify the curves, angles, and anchor points of paths for precise control.
  • Understanding SVG Code: Being familiar with SVG code can give you the best results when you create SVG from image free.

SVG Conversion: Common Mistakes to Avoid

To successfully create SVG from image free, you need to avoid common mistakes. One mistake is using the wrong source image. As mentioned earlier, images with complex details or gradients may not convert well to SVG. Using a low-resolution image can also lead to poor conversion quality. Another mistake is not optimizing your SVG files. Creating an SVG file is one thing, but to make it useable, you must optimize the output. This is not a difficult task but is necessary to use the finished product in the best way possible. If you skip this step, your file size may be unnecessarily large, resulting in slow loading times and a poor user experience. Avoid these common pitfalls to ensure your SVG conversions are successful and produce high-quality graphics.

Another common mistake is not experimenting with the different settings and options available in your chosen converter. The settings can greatly impact the quality of the final SVG file. If you have the time, try out the settings and see what works best for you. Take the time to learn about these settings. Try a few different conversion tools to find the one that best suits your needs. Some tools are better suited for certain types of images than others. Finally, another mistake is not testing your SVG files in different browsers and devices. SVG files can render differently in different environments, so it's essential to test your files thoroughly. By avoiding these common mistakes, you can ensure that your SVG conversions are successful and that your graphics look their best across all platforms and devices. Test out your designs and use these tips to make sure you create great graphics.

Pitfalls to Avoid

  • Using the Wrong Source Image: Use images well-suited for SVG conversion.
  • Not Optimizing Your SVGs: Always optimize your SVG files for performance.
  • Skipping Testing: Always test your SVGs in different browsers and devices. Avoiding mistakes is key to successfully create SVG from image free.

SVG vs. Other Image Formats: When to Choose SVG

Knowing when to choose SVG is crucial. When you create SVG from image free, you want to make sure you are using the right format. SVG is a vector format, which means it is resolution-independent. This makes it ideal for logos, icons, and illustrations that need to look sharp at any size. Other image formats, such as JPEG and PNG, are raster formats. These formats use pixels to define the image. Raster images can become pixelated when scaled up, making them unsuitable for applications that require scalability. If you need a graphic that can be scaled to any size without losing quality, SVG is the best choice. By understanding the strengths and weaknesses of each format, you can make an informed decision about which format is best for your needs.

JPEG is a raster format that is well-suited for photographs and complex images with many colors. JPEG files are lossy, which means that some image data is discarded during compression. JPEG is a raster format, so it is not as good for vector images as SVG. PNG is another raster format that is well-suited for images with transparency. PNG files are lossless, which means that no image data is discarded during compression. It is often a preferred choice when you need transparent backgrounds or when you need a high level of image quality. SVG is the best choice when you need a graphic that is scalable to any size. SVG files are also smaller than raster images, making them ideal for use on websites and in applications. By understanding the differences between SVG and other image formats, you can make an informed decision about which format is best for your needs. Choosing the right format is the key when you create SVG from image free.

Key Differences: SVG vs. Raster Formats

  • Scalability: SVG is infinitely scalable; raster formats are not.
  • File Size: SVG often has smaller file sizes for simple graphics.
  • Editing: SVG is easily editable with text editors and vector editors. Always choose the best option to create SVG from image free.

Creating SVG Animations and Interactive Graphics

SVGs aren't just static images; you can create animations and interactive graphics. This is a fantastic way to add dynamic content to your websites or applications. To create SVG animations, you can use CSS or JavaScript. CSS animations are easy to create and are best for simple animations, such as fading or scaling. JavaScript animations are more versatile and can be used to create complex animations and interactions. With animations and interactive graphics, you can provide a much more engaging user experience. By understanding the basics of SVG animation and interactivity, you can bring your static graphics to life. This is important if you need to bring your graphics to the next level once you create SVG from image free.

To create interactive graphics, you can use JavaScript to add event listeners to your SVG elements. This allows you to respond to user interactions, such as mouse clicks or hovers. For example, you can make a button change color when the user hovers over it or create a chart that updates when the user clicks on a data point. With CSS, you can add effects to create animations such as fade-ins, sliding, or rotating elements. This enhances the visual appeal and makes the content more dynamic. JavaScript allows you to add more complex interactions, such as the ability to drag and drop elements or create dynamic charts and graphs. By leveraging these techniques, you can create engaging user interfaces. When creating animations, keep file size in mind. Complex animations can make your SVG files very large, which can slow down page load times. Optimize your animations by using efficient code and minimizing the number of keyframes. With the ability to animate and make interactive graphics, your designs will be brought to a new level.

Techniques for Animation and Interactivity

  • CSS Animations: Use CSS for simple animations like fading or scaling.
  • JavaScript for Interactivity: Add event listeners to create interactive elements.
  • SMIL (SVG Animation): Use SMIL for basic animation capabilities directly within the SVG code. With these skills, you can transform static images once you create SVG from image free.

Best Practices: Utilizing SVGs in Web Design

Implementing SVGs correctly in web design is essential. When you create SVG from image free, understanding best practices is key to optimizing your website's performance and visual appeal. Always optimize your SVG files to reduce file size and improve loading times. You can use online tools or software to compress and optimize the code. Inline SVGs directly in your HTML or use them as external files in your CSS or HTML. Inlining SVGs can be useful for simple graphics, but for larger and more complex graphics, external files are usually the better choice. Using external files helps to keep your HTML code clean and organized. Understanding the correct implementation of SVGs helps you to create an efficient website. Be sure to apply the knowledge you have.

When embedding SVGs, you can use several methods, including the <img> tag, object tag, iframe tag, or the background-image property in CSS. Each method has its pros and cons, so choose the method that best suits your needs. Using the <img> tag is the simplest and most common method. It is compatible with most browsers and allows you to easily control the size and position of the SVG. However, the <img> tag does not allow you to access or manipulate the SVG code with JavaScript. Using the object tag is another method that provides more flexibility than the <img> tag. The object tag allows you to access and manipulate the SVG code with JavaScript. The iframe tag allows you to embed the SVG in an iframe, providing more control over the SVG's appearance. Finally, using the background-image property in CSS is ideal for small and simple graphics, such as icons. With the knowledge and implementation, you can leverage your designs once you create SVG from image free.

Tips for Web Design

  • Optimize SVG Files: Compress and optimize SVG code to minimize file size.
  • Choose the Right Embedding Method: Select the best approach to implement the SVG based on your needs.
  • Use CSS for Styling and Animation: Control the appearance and animations of SVGs using CSS. Make sure you understand the best ways to use the designs once you create SVG from image free.

Resources and Tools: Learn More About SVG Conversion

Want to delve deeper into how to create SVG from image free? There are numerous resources and tools available to help you along the way. Online documentation, tutorials, and articles can teach you the basics and guide you through more advanced techniques. Explore these resources to gain a solid understanding of the process. Learning more about SVG conversion will give you the advantage to make great designs. Always seek out the best tools to use to improve your design skills and work.

Websites like MDN Web Docs provide excellent documentation on SVG, including tutorials and examples. You can find many tutorials on websites like YouTube, where you can learn from experienced designers and developers. Websites and blogs are also a great place to stay up-to-date with the latest trends and best practices. When it comes to tools, you have several options, including online converters and desktop software. Experiment with different tools to find the one that best suits your needs. You can also explore tools that let you optimize your SVG files, compress the files and remove any unnecessary code. By exploring these resources, you can become an SVG expert. Remember to continue learning to make great designs once you create SVG from image free.

Recommended Resources

  • MDN Web Docs: Comprehensive documentation on SVG.
  • Online Tutorials: YouTube, blogs, and websites for step-by-step guides.
  • SVG Optimization Tools: Tools for optimizing file size and code. Always keep learning to better your skills in the process to create SVG from image free.