Dieser Artikel führt hauptsächlich die grundlegenden Konzepte von SVG sowie den Unterschied zwischen SVG und Leinwand ein und gibt schließlich ein einfaches Beispiel, um alle zu erleichtern, um die skalierbaren SVG -Grafiken besser zu verstehen. Für alle empfohlen.
Baidu Encyclopedia:
SVG Skalierbare Vektorgrafik ist ein grafisches Format, das auf der erweiterbaren Markup-Sprache (XML) basiert, die zweidimensionale Vektorgrafiken beschreibt. SVG ist ein neues zweidimensionales Vektor-Grafikformat, das von W3C formuliert wurde, und ist auch ein Netzwerkvektorgrafikstandard in der Spezifikation. SVG folgt die XML -Syntax streng und verwendet eine deskriptive Sprache im Textformat, um den Bildinhalt zu beschreiben. Daher handelt es sich um ein Vektorgrafikformat, das unabhängig von der Bildauflösung ist.
Was ist SVG?SVG bezieht sich auf skalierbare Vektorgrafiken (skalierbare Vektorgrafiken)
SVG wird verwendet, um vektorbasierte Grafiken für Netzwerke zu definieren
SVG definiert Grafiken im XML -Format
SVG -Bilder verlieren ihre Grafikqualität nicht, wenn sie vergrößert oder verändert werden.
SVG ist der Standard für die World Wide Web Alliance
SVG ist ein Ganzes mit W3C -Standards wie DOM und XSL
Der Unterschied zwischen Leinwand und SVG:Svg
SVG ist eine Sprache, die XML verwendet, um 2D -Grafiken zu beschreiben.
SVG basiert auf XML, was bedeutet, dass jedes Element im SVG DOM verfügbar ist. Sie können einen JavaScript -Ereignis -Handler an ein Element anhängen.
In SVG wird jede gezogene Figur als Objekt behandelt. Wenn sich die Eigenschaften des SVG -Objekts ändern, kann der Browser die Grafiken automatisch reproduzieren.
Merkmale:
Keine Auflösungsabhängigkeit
Support -Event -Handler
Am besten für Anwendungen mit großen Rendering -Bereichen (wie Google Maps)
Eine hohe Komplexität kann das Rendering verlangsamen (keine Anwendung, die DOM überprüft)
Nicht für Spielanwendungen geeignet
Leinwand
Leinwand zeichnet 2D -Grafiken über JavaScript.
Leinwand wird von Pixel Pixel gerendert.
In Leinwand wird der Browser nicht weiterhin die Aufmerksamkeit des Browsers auf sich ziehen. Wenn sich ihre Position ändert, muss auch die gesamte Szene neu gestrichen werden, einschließlich eines Objekts, das möglicherweise von den Grafiken überschrieben wurde.
Merkmale:
Auflösungsabhängige
Event -Handler werden nicht unterstützt
Schwache Fähigkeit zur Rendite von Text -Rendern
Fähigkeit, Ergebnisbilder im .png- oder .jpg -Format zu speichern
Am besten für bildintensive Spiele, von denen viele häufig neu gestrichen werden
SVG -Beispiel:Kopieren Sie den Code