How to Upload an Svg File to Shopify

Recently, we provided a keen list of websites where you can download icon packs and explained how iconography can exist used to effectively communicate with your visitors. Not merely tin can icons enhance your site's overall blueprint, but they tin exist effectively used as tools to increase readability, highlight important content, and reinforce functionality or features.

In this postal service, nosotros will show y'all how to implement Scalable Vector Graphic (SVG) icons on your site in a few easy steps, and we'll explicate how you can accept your icons to the next level with animations.

You might likewise like: Designing with SVG: How Scalable Vector Graphics Tin Increase Company Date

Why you should employ SVG icons

When you start a new web projection, you should always be thinking near the devices that run the web and that the spider web itself is ever-changing. While you can't predict the future, you should always await for strategies to time to come-proof your web projects as best equally yous tin can.

This is where SVG icons can help. Since SVGs are vector graphics, they are a great way to future-proof your site since they can scale from 20px by 20px to 1000px by 1000px without losing clarity. Plus, they are screen resolution independent significant that they volition retain their image quality without becoming pixelated on any screen resolution. Not likewise long ago, devices had very low resolution displays. Dorsum and then, we couldn't accept imagined the beautiful, loftier-density displays we now carry around in our pockets. As this progress continues, with contempo developments such as the release of 4K displays, we must think proactively well-nigh our designs.

By using SVG icons, yous're ensuring that your design volition wait nifty on whatever screen while maintaining a small file size. This is what makes SVGs unique compared to JPGs and PNGs, which require boosted copies of the image file and sometimes extra javascript to decide which resolution should exist displayed. Conspicuously, this is neither effective nor efficient.

Ane of the many other benefits of using an SVG icon is that you can edit its size and colour via CSS. Yous tin besides animate them too. In this tutorial, we'll be using icons from icons8.com ( this resource provides free icon packs provided that y'all credit their site). To follow along, but download the sample lawmaking provided.

Stride 1: Downloading the SVG icon

Icons8 provides HTML to implement SVG icons. This is the fastest and easiest way to add together an icon to your site, and you won't be required to upload an SVG file to your server. In this example, we will show you how to add a Facebook icon to your site.

To admission the icon below icon, visit this page .

Click on the "Generate HTML" button beneath the icon. This volition show a pop-upwardly window with HTML that y'all can copy and paste into your HTML file.

Copy and paste the HTML into your HTML page.

Add the CSS provided by Icon8 to your CSS File.

Preview your page to encounter the Facebook SVG Icon.

Step ii: Styling the SVG icon

Irresolute the CSS make full attribute to "fill up: #96BE4F;" changes the Facebook icon's colour without whatever additional piece of work.

If you practise non have access to the CSS file on your site, you lot can add inline styles on your HTML folio by adding a < style > tag:

Alternatively, yous tin use the Icons8 colour picker to select a color for the Facebook icon.

iii. Animating the SVG icon

To breathing SVG icons, we're going to use a great Javascript library called Vivus . Vivus provides several out of the box animations and plenty of customization capabilities. To prove y'all a quick instance, we've blithe the outlines of the Facebook icon. You can come across the finished effect below:

Vivus provides a great set of documentation, merely we will go on things simple. We will include the vivus.js file in our html and add the post-obit call:

To view the animated icon, simply refresh your folio. If you'd like to customize your animations or view other presets, visit the Vivus.js Github page .

Start using icons in your designs

I hope that this post has shown you how easy information technology is to add an SVG icon to your site and animate it using just a few lines of lawmaking and a javascript library. By post-obit the three steps outlined in this tutorial, you are now able to create a great user experience while future-proofing your site and saving time along the way.

Accept any questions nearly this tutorial? Permit me know in the comments.

You might also like: How to Build Amazing Web Pattern Animations — No Programming Required

Allow'south grow your digital business organization

Get design inspiration, development tips, and applied takeaways delivered straight to your inbox.

No accuse. Unsubscribe anytime.

thomasbearile.blogspot.com

Source: https://www.shopify.com/partners/blog/69475267-how-to-upload-and-animate-svg-icons-in-3-simple-steps

Share this post