Najlepszy sposób, aby umieścić SVG treści w formacie HTML

Question

Z moich badań, rozumiem, istnieją trzy sposoby, aby umieścić plik SVG wewnątrz HTML:

wykorzystujące osadzić:

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

przy użyciu obiektu obiekt:

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" /> 

użyciu iframe:

<iframe src="plot1.svg" width="500" height="320"> </iframe> 

Mam eksperymentował z całej trójki na statywie badawczym (django wbudowany serwer dev, rendering strony w Firefoksie 3.6). W tym oczywiście sterylnym środowisku nie zauważyłem żadnej różnicy między wydajnością lub współczynnikiem wydajności - trzy w/r/t.

Moje pytanie brzmi, czy jedno z nich jest lepsze od pozostałych dwóch, a jeśli tak, to które. Odpowiedź może oczywiście zależeć od faktów, które starałem się ograniczyć do tego, co istotne:

Często wyświetlamy dane (np. Serie czasowe) na naszej stronie internetowej, zwykle tworzone w odpowiedzi na niektóre działania użytkowników; w oparciu o tę akcję użytkownika wywoływane jest wywołanie do bazy danych, zwrócone dane są pomijane i przesyłane do silnika kreślarskiego, który renderuje statyczny obraz, który jest następnie osadzany na stronie - bardzo standardowe elementy.

Działa to dobrze, ale chciałbym dodać do tych wykresów niektóre funkcje interaktywne (np. Etykiety narzędzi, etykiety osi z hiperłączami, podświetlając grupę punktów w/na wykresie). Niektóre wykresy są dość wyrafinowane (na przykład warunkowanie wieloma panelami) i nie znalazłem biblioteki wykresów JavaScript, która zawiera te funkcje. W końcu zdecydowałem się na używanie tej samej biblioteki kreślarskiej (Lattice in R), ale renderowanie każdego wykresu w svg, a następnie dodawanie funkcji interakcji użytkownika w etapie przetwarzania końcowego, który składa się głównie z funkcji javascript, które bezpośrednio manipulują XML.

Answer 1

<embed> Generalnie unikam. Jest przestarzały w HTML4, nie zezwala na odpowiednie treści zastępcze i miał problemy z wyborem w IE.

<object> pozwoli Ci zamieścić zastępczą treść HTML dla przeglądarek bez obsługi SVG. powróci do monitu o pobranie pliku .svg. To, która z nich jest najlepsza, prawdopodobnie zależy od aplikacji.

Inną alternatywą dla współczesnych przeglądarek (w tym IE z wersji 9) jest udostępnienie strony internetowej w postaci elementów SVG na samej stronie.

Answer 2

dla mnie najlepszym sposobem jest ten

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > 
    <image x="0" y="0" height="60" width="60" xlink:href="huge-red-circle.svg" /> 
</svg> 

You can see the example here

źródło: http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial