Gunnar Bittersmann: SVG2SVG

Beitrag lesen

@@Rainer der 2.

Man spricht von SVG als Code innerhalb von HTML-/XML. Zum andern aber gibt es Grafiken im SVG-Format, die man in HTML einbinden kann.

SVG ist ein Vektorgrafikformat, in dem die Grafik in lesbarem Text in XML-Syntax beschrieben ist. (Die widerspiegelt sich im Medientypen image/svg+xml.

SVG kann also (wie jede andere XML-Anwendung auch) innerhalb von XML-Anwendungen verwendet werden. Bspw. in XHTML 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head></head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg"></svg>
  </body>
</html>

Das wurde in HTML5 übernommen. Dort bedarf es auch keiner Namensraumangabe.

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <svg></svg>
  </body>
</html>

Das Ergebnis in der Anzege ist das selbe.

Nicht dasselbe ist es, wenn du das SVG mit CSS stylen willst. Da SVG ja XML ist, ist das ja möglich.

Wenn das SVG im HTML steht:

<!DOCTYPE html>
<html>
  <head><style>svg { fill: rebeccapurple }</style>
  </head>
  <body>
    <svg></svg>
  </body>
</html>

und schon wird alles violett (sofern nicht im SVG noch anders angegeben).

Wenn das SVG mittels img oder object aus einer externen Datei eingebunden wird, kommt man mit CSS von außen nicht mehr ran. Dazu müsste das Stylesheet in der SVG-Datei stehen

<svg xmlns="http://www.w3.org/2000/svg">
  <style></style></svg>

bzw. aus der SVG-Datei heraus referenziert werden:

<?xml-stylesheet href="…" type="text/css"?>
<svg></svg>

Kann ich aus einem SVG-Bild einen entsprechenden Code generieren und unmgekehrt?

Die Frage verstehe ich nicht.

Du kannst dir bei einer im Browser dargestellten SVG-Grafik den Quelltext ansehen – wie bei einem im Browser dargestellten HTML-Dokument auch.

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory