SVGs

• Remember to optimise the SVG before using it on your site. In Illustrator you can 'Save as' a compressed SVG, in Inkscape you can save as an 'Optimised SVG'. There are also websites that clean SVGs for you (e.g. SVG Optimizer).
• Also bear in mind accessibility. Give the SVG a title and description, and use text if possible rather than text converted to paths. In practice I've found that font rendering is buggy so for the time being I've converted text into paths. For more on accessibility see this SitePoint article.
• Think of putting your SVG code inline (rather than linking to it with the img tag). This makes the it more accessible but also means you can make the SVG interactive.
• elixir-europe.org will increasingly use SVGs for illustrations. You can see a simple example on the Governance page.

• Images
• Back to the top