I’d always pick SVG if I have the choice, because as XML docs they can be modified much more precisely than raster images.
In OP’s example, instead of downloading the .svg.png via right-click “Save As”, you can use the download button here to get the original SVG:
Method 1
You can paste the SVG code directly into the HTML editor of a field:
Then changing the fill color is as simple as this:
/* override inline styles with !important */
svg path {
fill: yellow !important;
}
Result:
Method 2
Or you paste them into the rich text editor like images, which might be a preferable workflow to some:
However, for this method, you’ll need to replace the standard img tags with objects in order to expose the SVG data. I wrote a script for that:
SVG access script
<script>
/* SVG access script by Matthias Metelka | @kleinerpirat */
var svgImages = [...document.getElementsByTagName("IMG")].filter(img =>
/\.svg/.test(img.src)
);
// Replace img with object
// to allow access to SVG contentDocument
svgImages.forEach(img => {
const svgObj = document.createElement("object");
svgObj.type = "image/svg+xml";
svgObj.data = img.src;
img.after(svgObj);
img.remove();
svgObj.addEventListener(
"load",
() => {
/* you can query svgDoc for paths, shapes etc. */
const svgDoc = svgObj.contentDocument;
/* copy user stylesheet into SVG */
const style = document.createElement("style");
style.textContent = document.querySelector("#qa > style").textContent;
const svg = svgDoc.firstChild;
svg.insertBefore(style, svg.firstChild);
}
);
});
</script>
(slightly adjusted from Diagram (maybe HTML) integration possible? - #3 by kleinerpirat)
Then you can also give the symbol any color you want. You’ll need to explicitly set a background color, otherwise it is white.
/* Container */
object {
border-radius: 50%;
}
/* set explicitly, otherwise it will be white */
svg {
background: linear-gradient(145deg, #fe1541, #d51237);
}
svg path {
fill: black !important;
/* you can also adjust stroke, stroke-width etc. */
}
Result:
Interactive football playbook
As another example why SVG is superior to raster images, I split static SVGs from my Hudl football playbook to multiple interactive cards. That notetype is mostly HTML+CSS and doesn’t need any JS other than for toggling extra info.
Original SVG from Hudl:
