Aqua SVG Sprite


This plugin allows you to create an SVG sprite by uploading individual files to the WordPress media library.

Shortcode Usage

Aqua SVG Sprite will add a new [SVG] button to your 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"].

PHP Usage

A call to the_aqua_svg( 'some-slug' ) will output SVG code for the sprite with an ID (post slug) of “some-slug”. If you tag an image with a different sprite group than the default “general” one, you access those by calling the_aqua_svg( 'some-slug', 'some-group' ).

Full PHP usage options are as follows:
the_aqua_svg( string $slug, string $sprite = 'general', array $attr( 'attribute' => 'value' ) )

For example:
// echo the “some-slug” svg from the default “general” group
the_aqua_svg( ‘some-slug’ );

// store (not echo) the “some-slug” SVG from the “some-sprite” group,
// adding viewbox and fill properties.
$svg_string = get_aqua_svg( ‘some-slug’, ‘some-sprite’, array( ‘viewbox’ => ‘0 0 1000 1000’, ‘fill’ => ‘aquamarine’ ) );

// echo it manually
echo $svg_string;

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. Depending on the number of images you’re displaying, this can significantly speed up your website.

More Information

You can also learn more about using Aqua SVG Sprite, with advanced options and useful tips.



Leave a Reply

پنج × 2 =