Skip to content

Instantly share code, notes, and snippets.

@AmeliaBR
Created July 5, 2017 01:08
Show Gist options
  • Save AmeliaBR/193a8f36eb637af1684201821afd5f66 to your computer and use it in GitHub Desktop.
Save AmeliaBR/193a8f36eb637af1684201821afd5f66 to your computer and use it in GitHub Desktop.
Testing SVG files in GitHub Gists
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200px" height="200px" viewBox="0 0 40 40">
<title>Basic Markers</title>
<style>
circle {
fill: tomato;
stroke: firebrick;
fill-opacity: 0.7;
}
path {
fill: none;
stroke: indigo;
stroke-linecap: round;
}
</style>
<marker id="m" overflow="visible">
<circle r="2.5" />
</marker>
<path d="M5,5 Q5,35 35,35" marker-start="url(#m)" />
</svg>
@AmeliaBR
Copy link
Author

AmeliaBR commented Jul 5, 2017

Testing linking to a Gist SVG from GitHub comments:

Hopefully, the same SVG as above, a red circular marker on a purple curve. Either that or a broken-image icon. We'll see

@AlanCoding
Copy link

Thanks, this was helpful for me doing the same with graphviz output https://gist.github.com/AlanCoding/bca128a1b391e28819f4020eb9b6536e

@AmeliaBR
Copy link
Author

AmeliaBR commented Nov 6, 2019

@AlanCoding I'm not sure how you found this isolated gist, but I'm glad it was useful for you! (Even if it wasn't for me, since what I was trying to do was figure out how to include SVGs in issue comments!) But yes, at least gists are a great way to display a collection of short code files including SVG.

@shanemcd
Copy link

shanemcd commented Jan 9, 2024

This gist is the first google result for "github gist svg". Also, hi Alan!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment