Aqua SVG Sprite

Aqua SVG Sprite

Wordpress plugin

Install on Wordpress

App Details

This plugin allows you to create SVG sprites out of images from your WordPress media library.

Why Use SVG Sprites?

SVG, or Scalable Vector Graphics, allow you to add resolution-independent images to your websites. These images are generally much sharper and smaller in file size compared to other formats like JPEG.

However, each SVG image needs to be requested separately, which slows down your website. Adding SVG images to a sprite allows the browser to download multiple images with just one request, then show the individual pieces of the sprite separately. By reducing requests, this speeds up your site.

Creating a Sprite

Aqua SVG Sprite adds a new SVG Sprite menu to the WordPress sidebar, which functions a lot like the default Posts or Pages menus; you can add, edit, and trash individual SVG images under All Items.

When you add or edit an item, You’re able to choose a few things:

  1. The Title makes it easy to find an individual SVG and is also used for selecting an SVG by the shortcode generator button.
  2. The Slug is used as the ID for the symbol in the sprite, which essentially allows WordPress to extract one SVG image from the sprite and display it on the page.
  3. The Aqua SVG Sprite Image is where you add a single SVG image that gets added to the sprite.
  4. There are some basic instructions on usage, pre-populated with the ID and group (explained in the next section) for the individual SVG you’re viewing.
  5. In the sidebar, you can select a Sprite Group as explained in the next section.
  6. Last of course, Publish adds the SVG to the sprite.

Creating Additional Sprite Groups

If you’d like to use more than one sprite (the built in General sprite), you can add additional groups by clicking SVG Sprite > Sprite Groups in the WordPress sidebar. These work similar to WordPress tags, except you can only add each individual SVG image to one sprite group. Since they’re compiled into separate sprite groups, marking the same SVG for multiple groups would duplicate code, defeating the purpose of a sprite.

After you add a new Sprite Group, it appears as a selection in the right sidebar’s Sprite Group selector when creating or editing individual SVG sprite images.

Using the Gutenberg Block

Aqua SVG Sprite will add a new block called SVG Sprite to your Gutenberg block editor. After you add an SVG Sprite block, you can select the image you would like to use in the block inspector to the right. You can also add an advanced pseudo-array or HTML properties for more control, like viewbox=0 0 1000 1000,fill=aquamarine to add a viewbox and fill to the SVG element.

Using the Shortcodes

Aqua SVG Sprite will add a new [SVG] button to your classic editor (anywhere a WYSIWYG with TinyMCE appears), which will guide you through adding a shortcode to your content.

For example, you could display the “Some Slug” image from the default “General” sprite group like [aqua-svg slug="some-slug"]. If “Some Slug” were part of the “Some Group” sprite instead, you would use [aqua-svg slug="some-slug" sprite="some-group"]. You can also add a pseudo-array of HTML properties for more control like [aqua-svg slug="some-slug" sprite="some-sprite" attr="viewbox=0 0 1000 1000,fill=aquamarine"] to add a viewbox and fill to the SVG element..

Using PHP Functions and Advanced Features

You can visit the documentation for more information on using PHP functions, along with code examples and details on more advanced features.

Pricing

Starting from $0 per month.

Check Out the Bracket Maker Widget

By Common Ninja

Bracket MakerTry For Free!

App Info

Rating

Reviewers

1 reviews

Tags

sprite
SVG

Developed By

thinkaquamarine

Quick & Easy

Find the Best Wordpress plugins for you

Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!

Testimonial

Testimonial plugins for Wordpress

Galleries

Galleries plugins for Wordpress

SEO

SEO plugins for Wordpress

Contact Form

Contact Form plugins for Wordpress

Forms

Forms plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Sliders

Sliders plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Comments

Comments plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Maps

Maps plugins for Wordpress

Security

Security plugins for Wordpress

Translation

Translation plugins for Wordpress

Ads

Ads plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Music Player

Music Player plugins for Wordpress

Backup

Backup plugins for Wordpress

Privacy

Privacy plugins for Wordpress

Optimize

Optimize plugins for Wordpress

Chat

Chat plugins for Wordpress

Countdown

Countdown plugins for Wordpress

Email Marketing

Email Marketing plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Membership

Membership plugins for Wordpress

popup

popup plugins for Wordpress

SiteMap

SiteMap plugins for Wordpress

Payment

Payment plugins for Wordpress

Coming Soon

Coming Soon plugins for Wordpress

Ecommerce

Ecommerce plugins for Wordpress

Customer Support

Customer Support plugins for Wordpress

Inventory

Inventory plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Testimonials

Testimonials plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Slider

Slider plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Membership

Membership plugins for Wordpress

Forms

Forms plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Contact

Contact plugins for Wordpress

Comments

Comments plugins for Wordpress

Analytics

Analytics plugins for Wordpress

More plugins

plugins You Might Like

Discover Apps By Platform

Discover the best apps for your website

WordPress
Wix
Shopify
Weebly
Webflow
Joomla
PrestaShop
Shift4Shop
WebsiteX5
MODX
Opencart
NopCommerce

Common Ninja Search Engine

The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!

Multiple platforms