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;
- as a simple image
- as a image with the possibility to zoom and drag the image by mouse
- Same as nr2, but with the addition to use buttons as well as the mouse
With option 2 and 3 you can double-click on the image to restore the image to the begin position and scale.
To start inserting the svg file we click on the blue button of the SVG-Complete plugin.
This will open a pop-up box where we will see the plugin options. From top to bottom we see:
- 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.
If you have any questions or remarks, please leave a comment below.
Thank you for your excellent and very useful plugin. I am using it to render a simple two-color word-based logo created in Sketch app (Mac OS X) and exported as an SVG file. The logo renders perfectly on the site using Safari and Firefox on Mac OS X (that is, the logo appearance is identical to what is displayed in Sketch app -- using the Eurostyle font). However, when the site is viewed on iOS and Windows 10, the logo is rendered and appears as Times New Roman font.
1. I assumed the SVG file would capture the *appearance* of the source image and not its text content. Is this an incorrect assumption?
2. Is there a way to address this problem to ensure the logo is rendered exactly line the source?