Where do you host temporary images PNG/SVG for use in a Codepen?

General Web Dev
1

Someone mentioned somewhere recently, but I can’t remember where. Ideally, I need somewhere that will support SVG’s, but PNG would be an acceptable alternative. I would use Flickr, but I believe it converts things to JPG, and I need the transparency. Can anyone suggest a suitable host?

2

Personally, for CodePen I would either grab the raw SVG code, or for a PNG, I’d use a data URI. That way you can keep everything in one place.

Of course, for a fairly low price you can have a Pro account at CodePen, and thus host your images right there.

3

I must admit, I didn’t know you could do that to be honest. I’ve only ever looked at them as if they were another image format. How do I access the code?

4

There are various ways, but in my experience, the simplest way is to drag the SVG image onto a new tab in Chrome. That loads the image in the browser. Then go to Inspect element, and you’ll see the raw code in the Inspector. Right-click on the svg element in the Inspector, choose Edit as HTML, and copy the entire SVG code. (You can also just view source to get the code.)

5

From there, presumably, it’s just a case of pasting it into the relevant position within your HTML document and style, if required, in the CSS.

6

Once you have that code, you can paste it into your HTML, and it will appear as is.

If you want to use it in your CSS, or inside an img element, for example, then you need a “data URI”, which is different. This also works for other image formats, too.

Again, there are many tools, but I like to use Chrome. So—

  • drag the image (be it an SVG file or PNG or whatever) into a new tab in Chrome, and it should display on screen.

  • right click on the image, and choose Inspect Element.

  • Right click on the image’s URL in the Inspector, and choose Open Link in Resources Panel:

  • in the Resources panel, right-click on the image and choose Copy Image as Data URL:

The copied code is a long string of gibberish, starting with something like this: data:image/png;base64,. You can then use that code in several ways:

  • in your HTML, as the src of an image: <img src=“data:image/png;base64,iVBO…ltkg”>

  • in your CSS, like so: background-image: url(data:image/png;base64,iVBO…ltkg);

Hope that helps!

2 Likes
7

Yep, I’m good with all that and I’ve now dropped what I need into a new Codepen. You can anticipate an entirely new question in ‘HTML & CSS’ very shortly.

As an aside, my usual work provided IE11 wouldn’t let me do the right-click, edit HTML thing. Had to jump assorted hoops before I got there, but I did in the end.

8

I guess it’s easier to use online tools like these:

http://duri.me/
http://www.opinionatedgeek.com/dotnet/tools/base64encode/
http://dataurl.net/
http://dopiaza.org/tools/datauri/index.php

I prefer to do without extra tools if possible, which is why I like the Chrome option. But it is a bit awkward.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

10

I’ve struggled with this issue a bit myself until I figured you can host SVG as linkable Gists on Github. You’ll need to use RawGit.com to get the mimetype served correctly, but they’ll even serve your SVG via a production-capacity CDN for free.

It’s fairly straight forward to work out, but I’ve written up the detail here: