Export HTML CSS with inkscape or gimp

Tutorial: SVG in HTML

Create SVG with graphics programs

In 1999 Adobe proposed SVG as the standard for vector graphics on websites to the W3C. SVG 1.0 was passed by the W3C in 2001, but it was not until the end of IE8 that all browsers render SVG without a plugin in HTML5 pages.

SVG can be generated in Adobe Illustrator, with CorelDRAW and online with SVG-edit.

Inkscape is an open source SVG program with a graphical user interface for Mac, PC and Unix. If you write or change SVG »by hand«, you can see the changes live in the preview of Barebone BBEdit.

Adobe Photoshop CC saves graphics as SVG.

SVG applications

For icons that are laboriously converted into icon fonts, the direct use of SVG icons is easier and more effective. Size, colors and filters as well as the shadow of the icons can be controlled in the same way as with fonts, title and desc tags in SVG graphics improve the accessibility compared to icon fonts.

SVG syntax and CSS

SVG tags are written in angle brackets like HTML, must be closed and can contain attributes such as id and class, width and fill contain.

Unlike HTML, SVG attaches great importance to correct spelling and does not forgive mistakes.

viewBox attribute ----- + | | SVG for graphics, icons and UI Elements A detailed description of the structure of SVG graphics | | | | + - element name | + - + - style and id attributes | + - individual attributes ...

Instead of the alt tag for images, a title tag and a short description in a desc element describe the image or graphic for screen readers. The title tag must be the first child in an SVG container (svg, g, a, pattern, ...). Its content is not displayed. In addition to the title tag, a desc tag with a detailed description improves the rendering of the SVG element in the screen readers.

SVG attributes control the display of SVG elements (fill, stroke, font-family, ...) similar to HTML, but with all options for presentation or representation, CSS in SVG acts in a style attribute. SVG knows class and id and can evaluate CSS from a style tag and even from an external CSS file.

SVG inline or as an img tag in HTML documents

Graphics can be inserted directly into the HTML markup: The SVG tag can be located anywhere in the HTML document within the body tag.

If SVG is placed inline in the HTML and not loaded as an img tag, the SVG tag does not need an XML namespace. xmlns = "http://www.w3.org/2000/svg" can be omitted.

SVG tag in HTML

<!DOCTYPE html> <html lang="de"> … <body> <svg width="100%" height="100%" viewBox="0 0 560 110"> <circle cx="200" cy="50" r="40" … /> <rect x="100" y="10" width="80" height="60" … /> </svg> </body>

Load external SVG file

For the external SVG file chart.svg again is the XML namespace xmlns Required from version 1.1 and the file needs an xml directive. The browsers display the SVG correctly even without the xml directive, but without the directive, applications such as WordPress refuse to upload.

<?xml version="1.1" encoding="UTF-8"?> <svg version="1.1" viewBox="0 0 144 75" xmlns="http://www.w3.org/2000/svg"> … </svg>

The directive was not yet required in SVG 1.0, but it would be better if it always preceded the opening SVG tag. UTF-8 is the standard, so you could save yourself.

Load SVG file with img tag - works just like embedding a JPG or PNG image.

<img src="chart.svg" width="171" height="162" alt="SVG-Statistik mit HTML-img-Tag laden" />

Bitmaps in SVG

SVG itself can - similar to EPS and TIFF - contain vector graphics as well as bitmap or pixel images. Larger SVG images are included with an img tag, as are JPG or PNG.

In addition to the direct integration in the HTML source code and the integration in an img tag, SVG can be loaded in an iframe or an object tag and also set as a background image in the CSS.

Images (png, gif, jpg) are integrated or embedded with an SVG image element. The image tag is similar to the HTML img tag, but a number of special features must be taken into account:

  • The SVG image tag must contain a trailing slash, otherwise elements following the image tag will not be displayed.
  • width- and height-Attributes must be set, otherwise the browser will not load the image.
<image width="100" height="100" x="100" y="5" xlink:href="bild.png" />

More about the SVG image element: Bitmaps in SVG

SVG security

The social media resist SVG with hands and feet and cite security reasons as an argument for the refusal. WordPress refuses the upload if the XML prefix is ​​not the first line in the SVG file.

<svg width="100%" height="100%" viewBox="0 0 1920 1450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path id="star" d="m753.7 1211l-93.5-53-94.51 52 21.3-106-78.4-73 106.7-12 45.8-97.4 44.2 97.4 106.8 14-79.4 72z" fill="#F1D85A"/> <use transform="translate(305 0)" xlink:href="#star"/> <use transform="translate(610 0)" xlink:href="#star"/> <use transform="translate(152,213)" xlink:href="#star"/> <use transform="translate(457,213)" xlink:href="#star"/> <image x="200" y="0" width="1512" height="887" xlink:href="polarbear.png"/> </svg>

For the sake of security, externally saved SVG graphics are not allowed to load external CSS and script resources, not even from the same domain. Bitmaps such as JPEG and PNG, however, are allowed

<img loading="lazy" src="fivestars.svg" width="1920" height="1450" alt="SVG mit Bild als data-url">

Again: The browsers refuse scripts in external SVG files that are loaded via HTML-img-Tag, do not execute any script code and, under certain circumstances, they do not display the bitmap image.

Inline SVG, on the other hand, is allowed to do everything: load external resources and execute scripts.

SVG for mobile devices

The demands on graphics grow with mobile devices. On the one hand, the images for the mobile devices should bring less load, on the other hand, the monitors are increasingly being retina displays.

Instead of delivering a graphic as a PNG in different resolutions, SVG brings optimal graphics for every monitor size at a low price. SVG graphics are almost always smaller than the PNG bitmaps generated from the graphic.

As a vector graphic, SVG can be adapted to the size of the viewport for responsive websites. The most important attribute for the flexible size of SVG is the viewBox attribute together with width = "100%" and height = "100%".

<svg width="100%" height="100%" viewBox="0 0 500 110" xmlns="http://www.w3.org/2000/svg"> </svg>

That would basically be enough to put an SVG graphic in a responsive website:

<style> .svgbox { width: 100%; } .svgbox svg { width: 100%; height: auto; } </style> <div class="svgbox"> <svg width="100%" height="100%" viewBox="0 0 300 300"> … </svg> </div>

The modern browsers can calculate the height of the graphic from the aspect ratio in the viewBox attribute and adapt the SVG graphic to the comprehensive block.

This is countered by the older version of Internet Explorer: Only Microsoft Edge masters this computing trick. IE9, IE10 and IE11, on the other hand, use a default - they give the SVG graphic a height of 150px and adjust the width according to the aspect ratios. As long as the older Internet Explorer is still active, CSS rules must adapt the SVG to its comprehensive block.

restrictions

To this day, social media hardly support SVG at all. Content management systems such as WordPress and Drupal only accept SVG uploads in their media libraries with the help of plugins. Dropbox is one of the notable exceptions, allows SVG uploads and displays SVG correctly.

Image databases and programs such as Adobe Lightroom or Darktable also do not support SVG. Media Pro was one of the rare programs that would display SVG (Windows and Mac), but development has ceased.

Adobe Bridge (CC 2018) has supported SVG files since mid-2018.

External sources