How to Scrape SVG Icons from the Web for Creative Projects.

Introduction:

SVG icons are essential for modern web and graphic design, providing scalable and crisp visuals. If you’re looking to build a custom collection of SVG icons, scraping them from the web can be a great solution. In this guide, we’ll show you how to scrape SVG icons from unDraw, a popular source for free, customizable illustrations. Learn how to set up your tools, write a simple script, and start collecting icons for your creative projects.

1. Understanding SVG Icons:

What are SVG Icons?

SVG (Scalable Vector Graphics) icons are a type of graphic designed using vector-based technology. Unlike raster images (such as JPEGs or PNGs), SVGs are made up of XML-based text files that describe shapes, colors, and positions. This allows SVG icons to be infinitely scaled without losing quality, making them perfect for responsive web design and high-resolution displays. Each SVG file contains a set of instructions to render the graphic, which means it can be styled and animated using CSS and JavaScript.

Why are they Useful in Web Design and Creative Projects?

SVG icons offer several advantages in web design and creative projects:

• Scalability: SVG icons maintain their clarity and sharpness at any size, ensuring they look crisp on all devices, from small mobile screens to large desktop monitors.
• Editability: Since SVGs are text-based, you can easily customize their appearance using CSS or JavaScript. This makes it simple to change colors, sizes, and even animate the icons.
• Performance: SVG files are often smaller in size compared to raster images, leading to faster load times and better performance on websites.
• Accessibility: SVGs can include descriptive metadata, making them more accessible for users with visual impairments when used with screen readers.

By integrating SVG icons into your projects, you can enhance the visual appeal and functionality of your designs while ensuring they perform well across different devices and resolutions.

2. Introduction to unDraw:

unDraw is a popular resource offering a vast collection of free, high-quality SVG illustrations. It provides a wide range of customizable icons and graphics suitable for various design projects, from websites and applications to presentations and marketing materials. The illustrations cover diverse themes, including business, technology, education, and more. unDraw’s library is continuously updated, ensuring users have access to fresh and relevant designs.

3. Preparing for Scraping:

Tools Needed

To scrape SVG icons from websites like unDraw, you’ll need a few essential tools and libraries:

• Selenium: A powerful tool for automating web browsers. Selenium allows you to control a web browser programmatically, making it ideal for navigating websites, interacting with web elements, and extracting content. It’s particularly useful for scraping dynamic content that loads with JavaScript.
• WebDriver: Selenium requires a WebDriver for the specific browser you are using (e.g., ChromeDriver for Google Chrome). The WebDriver acts as a bridge between Selenium and the browser.
• Python: The programming language used for writing the scraping script. Python is popular for web scraping due to its simplicity and the availability of libraries like Selenium.
• WebDriver Manager: A Python library that automatically manages browser drivers (like ChromeDriver) for Selenium, simplifying setup and maintenance.

Browser Setup

Download the chrome driver:

https://storage.googleapis.com/chrome-for-testing-public/127.0.6533.119/win64/chrome-win64.zip

Install Selenium : First, ensure you have Selenium installed. You can install them using pip:

pip install selenium

Set Up the Browser: Initialize the browser in your scraping script. Here’s an example using Google Chrome with Selenium :

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options

chrome_options = Options()
chrome_options.add_argument("--disable-gpu")
service = ChromeService(executable_path=r'C:\Users\lenovo\Downloads\chromedriver-win64\chromedriver-win64\chromedriver.exe')
driver = webdriver.Chrome(service=service, options=chrome_options)

# Go to the target page
url = 'https://undraw.co/illustrations'
driver.get(url)

4. Writing the Scraping Script:

Step-by-Step Instructions

1. Navigating to unDraw and Inspecting the Elements:

• Open the unDraw website in your browser.
• Use the browser’s developer tools (right-click on the page and select “Inspect” or press F12) to examine the structure of the webpage.
• Identify the elements that contain the SVG icons. Typically, SVG elements are <svg> tags within specific containers or wrappers.
• We see that the <div> that contain the svgs elements has a class name ClassicGrid__Media-sc-td9pmq-2 ffqsDq.

2. Writing the Python Script to Scrape SVGs:

Handling Dynamic Content Loading

Many modern websites, including unDraw, load their content dynamically as you scroll. This means that not all elements are available immediately when the page first loads. To handle this, you need to implement scrolling in your script to ensure all content is loaded before scraping.

# Scroll down to load more illustrations if needed
last_height = driver.execute_script("return document.body.scrollHeight")

while True:
    driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
    time.sleep(2)  # Allow time for content to load
    new_height = driver.execute_script("return document.body.scrollHeight")
    if new_height == last_height:
        break
    last_height = new_height

Find and Store SVG Elements Locally :

try:
    svg_elements = driver.find_elements(By.TAG_NAME, "svg")
    for index, svg in enumerate(svg_elements):
        svg_code = svg.get_attribute("outerHTML")  # Get the full SVG code
        svgs.append(svg_code)
        
        # Save the SVG code to a file locally
        with open(f'svg_icon_{index}.svg', 'w', encoding='utf-8') as file:
            file.write(svg_code)
except Exception as e:
    print(f"An error occurred: {e}")

Close the Browser:

# Close the browser
driver.quit()

And There you have it more than 1000 svg icons with juste one click :

Conclusion

Scraping SVG icons from websites like unDraw can be an invaluable technique for building a customized collection of high-quality graphics for your design projects. By leveraging tools like Selenium, you can automate the extraction of these scalable vector images, allowing you to incorporate them seamlessly into your creative work.