Automatic-rock.nl

SVG with zoom, pan and drag in WordPress

This is the demo page of the SVG-complete plugin that I've made for WordPress.
You can download the plugin from the WordPress Plugin Repository.

The big advantage of svg files over jpg for example is that you can scale them as big as you want without losing quality! With large graphics a svg file will also use less kb than jpg or png for example.

With the SVG-complete plugin you can easily upload svg files to the media library and add them to your post via a button in the visual editor. Via this button the shortcode is created. For this plugin to work you'll need WordPress 3.9 or higher.

There are 3 options to display a svg file;

1. as a simple image
2. as a image with the possibility to zoom and drag the image by mouse
3. Same as nr2, but with the addition to use buttons as well as the mouse

svg file of a tiger. No drag or zoom, no buttons

svg file of a tiger. With zoom and drag, but no buttons

svg file of a tiger. with drag, zoom, and buttons

With option 2 and 3 you can double-click on the image to restore the image to the begin position and scale.

• Select SVG file; a button to upload and/or select a svg file from the media library. This will get the url of the svg file and put it in the textbox below.
• SVG url; In this textbox we'll see the link of the file we selected.
  Or, if we want to use a external image we can put the url here. For example the map of the world from wikipedia as seen in the example below
• Select alternative image file; here you can select a back-up image incase the browser of your website visitor fails to render the svg file. This can be a png, gif or jpg file for example. The image size of this file will be used as a predefined size in the 'width' and 'height' textboxes below.
• Image size; the image size selection lets you choose between the medium, large and full size of the alternative image, and resets the textboxes for width and height below.
• Alternative image url; see SVG url.
• Alt. text; The alt text is used to describe the image for seo purposes.
• Caption; here you can write an optional text about the svg image. If your svg file via the media uploader already had a caption you'll find it here. If the svg file didn't but your alternative image had a caption you will find that text here. The caption is made to look like the standard wordpress caption using your themes styling.
• Width; here you'll find a value if an alternative image is chosen from the media library. If an external image, or no alternative image is chosen this will be left empty. In any case you can set here the width of your image
• Height; see width.
• Keep aspect ratio; if you have chosen a width and height you can check this box. Now you can alter the width or height and the other will follow so your image will not be distorted
• CSS class; add an optional css class to the svg file for styling purposes
• Align; You can choose between align left, center or right.
• Image zoom and pan?; Here you can choose between the 3 options mention above:
  1- No zoom or pan
  2- Zoom and pan only by mouse
  3- Zoom and pan by mouse and buttons
• OK; click here to insert the svg shortcode in the editor. In the visual editor the shortcode will be replaced by an image. The buttons, if chosen, will not be show in the editor.

I hope this plugin will be very useful for anyone who needs svg images in his or her wordpress website 🙂
If you have any questions or remarks, please leave a comment below.