How To

Remoteless SVG

Copying code to the cloud and syncing it locally isn’t impossible. Just annoying.

I spent about half a year working on being able to remote load my SVG, and I wanted to for a few reasons:

  1. Having only one place to update my icons is more efficient
  2. They don’t need to be in code versioning control (like GitHub)
  3. Licensing (not all are free)

I solved those problems when I finally figured out SVG Injection (via javascript) and CORS to allow the scripts from my objects.

It’s not all lollipops and sunshine It’s not all lollipops and sunshine

However. There was, and is, one really big issue. The icons being remote mean if the remote server isn’t accessible but my site is, I got no icons. Now, the smart dev in me knows that I should have a check. If the server is up, use the icons remotely. Otherwise, use a fallback.

There was one big, and in the end insurmountable, problem with that. There was no way to do that without slowing my site down, which was the headache in the first place. If I check the uptime for every icon on a page, the site went from a 1 second load to up to 20 seconds. In the best solution, I added 2-5 second load to every page checking if the server was up on every page load. Which is kind of the problem with wp_remote_get() in the first place.

Top ↑

Make ’em local again Make ’em local again

This meant the ‘best’ solution was to make them local. Again. Yaaay.

But I really didn’t want to have them stashed in GitHub. I wanted my ‘base’ to be the cloud storage, and then that needed to sync. Normally I would use rsync for that but you can’t rsync from CEPH storage.

Don’t panic. There are answers.

Boto-Rsync Boto-Rsync

If you’re on DreamPress or any DreamHost server, they’ve forked boto-rsync and (if you set up a .boto file) you can do this:

boto-rsync --endpoint s3://my-cool-icons/ /home/my_user/

Using cron or some other scheduling tool, setting up a server to run that at regular intervals isn’t too terrible.

Top ↑


There’s also the option of AWS CLI, which is very similar, only it’s actually maintained. The advantage with boto-rsync is that it’s installed on the servers at DreamHost. If you have AWS CLI on your server, you can do this:

aws s3 --endpoint-url sync s3://my-cool-icons/ /home/my_user/

Keep in mind, you need to configure this either with aws configure or an ~/.aws/credentials files.

Top ↑

Pushing from the outside inside Pushing from the outside inside

You may have noticed that, unlike rsync, I can’t tell it to push to another server. That is, I can say “sync files from server A to server B” with rsync and I can’t with either boto-rsync or the AWS CLI.

And no, you just can’t.

Unless you use rclone. Which is a little messy but totally do-able.

There’s one other option though… I’ve been using Codeship to push code. That is, every time my GitHub repos update, it triggers a Codeship deploy. And in that deploy I usually just say “Rsync a git clone, k’thnx’bai.”

Now I tell it this too:

# Download from S3
pip install awscli
aws s3 --endpoint-url sync s3://my-cool-icons/ ~/my-cool-icons/
# Copy up to Server
rsync -avz -e "ssh" ~/lezpress-icons/ USER@DOMAIN:/home/USER/DOMAIN/wp-content/uploads/my-cool-icons/ --delete

I will note there’s one extra trick. You have to add Environment Variables for AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY on Codeship.

This works for me since there are few times I push an icon without also making some code changes to the server code anyway.

Hopefully if gives you some directions.