SVG Wytyczne Authoring


Original: https://jwatt.org/svg/authoring/

Istnieje wiele błędów w dokumentach SVG obecnie znalezionych w sieci. Ponieważ Adobe SVG Viewer ignoruje wiele z tych błędów, opiekunowie tych dokumentów zazwyczaj nie zdają sobie sprawy, że robią coś złego. Niestety, wynik jest, że zbyt często SVG w sieci nie działa w Mozilli, batik lub jeden z innych implementacjach SVG. Ważne jest, że problemy te są adresowane jak najszybciej, aby zapobiec ich rozmnożeniowego do narzędzi autorskich i dokumentów SVG, że ludzie będą pisać w przyszłości.

Dokument ten zwraca uwagę na niektóre z najczęstszych błędów popełnianych w SVG treści, i wyjaśnia, co może zrobić opiekunowie SVG je naprawić. Jest nadzieja, że ​​społeczność SVG będzie przeczytać ten dokument, a poszczególni członkowie społeczności będą robić to, co mogą, aby upewnić się, że SVG w sieci jest jako przenośne, jak to możliwe. Proszę rozpowszechniać. Jeśli widzisz inni dokonywania z błędów opisanych tutaj, proszę dać im znać, aby mogli je skorygować. Co ważniejsze, jeśli wiesz o SVG narzędzi autorskich, które czynią te błędy należy skontaktować się z dostawcą i daj mi znać. Zapraszam na link do tego dokumentu i wyślij mi swoją opinię. Mój adres email jest jwatt@jwatt.org.

Treść

  •     Konfiguracja serwera dla SVG
  •     Nie należy dołączać deklarację DOCTYPE
  •     Powiąż wymaganych nazw
  •     Unikaj “styl” atrybut gdzie to możliwe
  •     Określić jednostki w przypadku przypisania długości do właściwości
  •     Użyj świadomości przestrzeni nazw metod DOM
  •     Nie używać getter Adobe i rozszerzeń setter

Konfiguracja serwera dla SVG

To nie jest problem z SVG samej zawartości, ale jednak, błąd w konfiguracji serwera jest bardzo częstym powodem SVG nie załadować. Dla bezpieczeństwa i poprawności powodów, niektóre przeglądarki decyduje, jak obsługiwać pliki patrząc na nagłówkach HTTP serwer wysyła z nimi. Jeśli serwer nie jest skonfigurowany do wysyłania poprawne nagłówki z SVG, którym służy, a następnie przeglądarki jak Mozilla nie będzie traktować te pliki jak SVG. Zamiast tego będzie to najprawdopodobniej pokazać znaczników z plików w postaci tekstu lub zakodowany śmieci, a nawet zapytać widza, aby wybrać aplikację, aby je otworzyć. Dla normalnych plików SVG, serwery powinny wysłać nagłówek HTTP:

Content-Type: image / svg + xml

Dla skompresowane pliki SVG, serwery powinny wysłać nagłówki HTTP:

Content-Type: image / svg + xml
Content-Encoding: gzip

Możesz sprawdzić, czy serwer wysyła odpowiednie nagłówki HTTP ze swoimi SVG za pomocą strony internetowej, takich jak sniffer.net. Prześlij adres URL jednej z SVG i spojrzeć na nagłówki odpowiedzi HTTP. Jeśli okaże się, że twój serwer nie wysyła nagłówki z wartościami podanymi powyżej, należy skontaktować się z firmą hostingową. Jeśli masz problemy przekonując ich, aby poprawnie skonfigurować swoje serwery do SVG, mogą istnieć sposoby aby to zrobić samemu. Zobacz stronę konfiguracji serwera na SVG wiki dla wielu prostych rozwiązań.
Nie należy dołączać deklarację DOCTYPE

Definicje typu dokumentu XML DTD lub w skrócie, są cechą XML służy do sprawdzania zawartości dokumentu. DTD związany z dokumentem przez umieszczenie deklarację DOCTYPE w dokumencie. Poniższy wiersz jest przykładem SVG deklaracji DOCTYPE.

! <DOCTYPE svg PUBLIC “- / / W3C / / DTD SVG 1.1 / / EN”
“>”Http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>

Niestety SVG DTD są źródłem tak wielu problemów, SVG WG postanowiła nie pisać jeden na nadchodzące 1,2 SVG standardzie. W rzeczywistości członkowie WG SVG są nawet mówić ludziom, aby nie stosować deklarację DOCTYPE w SVG 1,0 i 1,1 dokumentów. tag, and assign them appropriate values as in the following example.”>Zamiast tego zawsze zawierać “Wersja” i “baseProfile” atrybuty tagu <svg> root, i przypisać im odpowiednie wartości, jak w poniższym przykładzie.

<Wersja svg = “1,1”
baseProfile = “full”
xmlns = “http://www.w3.org/2000/svg”
xmlns: XLink = “http://www.w3.org/1999/xlink”
“>xmlns: ev = “”> http://www.w3.org/2001/xml-events

Jeśli z jakiegoś powodu chcesz używać wbudowanej funkcji DOCTYPE deklaracji (do tworzenia elementów, itp.), po prostu pominąć publicznych i systemu identyfikatorów. Twój DOCTYPE deklaracja powinna wyglądać następująco.

<! DOCTYPE svg [
“><- Podmioty itp. tutaj ->
“>]>

Powiąż wymaganych nazw

SVG jest przestrzeni nazw XML dialekt, aw konsekwencji wszystkie dialekty XML używane w waszych SVG dokumentów musi być zobowiązany do ich nazw, jak określono w Przestrzenie nazw w XML rekomendacji. Rozsądne jest powiązać SVG i XLink nazw na minimum, a być może również XML namespace Imprezy. Nawet jeśli nie używasz XLink lub XML Events w obecnych wcieleniach niektóre z SVG dokumentów, łącznie z powiązaniami zapobiega irytujących błędów, jeśli zdecydujesz się ich użyć później i zapomnij dodać wiązań. tag in your SVG documents.”>To po prostu wymaga, aby obejmować następujące trzy atrybuty tagu <svg> korzeni swoimi SVG dokumentów.

<Svg xmlns = “http://www.w3.org/2000/svg”
xmlns: XLink = “http://www.w3.org/1999/xlink”
“>xmlns: ev = “”> http://www.w3.org/2001/xml-events

Uważaj, żeby nie wpisać xmlns: SVG zamiast tylko xmlns gdy powiąże SVG nazw. Jest to prosty błąd wprowadzić, ale taki, który może złamać wszystko. Zamiast SVG domyślnej przestrzeni nazw, wiąże go namespace przedrostek “svg”, i jest to prawie na pewno nie to, co chcesz robić w pliku SVG. Zgodny ze standardami przeglądarka będzie następnie nie uznają żadnych znaczników i atrybutów, które nie mają wyraźnego prefiksu przestrzeni nazw (prawdopodobnie większość, jeśli nie wszystkie z nich) i nie mogą oddać swój dokument jako SVG.
Unikaj “styl” atrybut gdzie to możliwe

To jest dość powszechne, aby zobaczyć atrybutu style używane do określania właściwości w SVG. Na przykład, można zobaczyć kod źródłowy, która określa właściwości wypełnienia i skok w następujący sposób:

Style <circle = “fill: red; skok: niebieski;” … “>/>

Zazwyczaj jest to po prostu nieodpłatne wykorzystanie atrybutu stylu, i coś, co powinno się unikać. Wbrew powszechnemu przekonaniu atrybut style (uwaga, to atrybut nie, element) nie rozdziela zawartość od prezentacji robi, i chyba trzeba zastąpić właściwości określone przez selektor CSS, to najlepiej używać SVG atrybutów formatowania zamiast. Innymi słowy, że byłoby lepiej, aby przepisać poprzedni fragment kodu, jak:

<Koło fill = “red” skok = “niebieski” … “>/>

Używanie atrybutów formatowania uniknąć pułapek, które mogą wystąpić podczas korzystania z CSS w SVG (patrz poniższy punkt, na przykład) i jest powszechnie uważany za lepszy styl. W odróżnieniu od CSS i atrybutu stylu, atrybuty formatowania są również obsługiwane w SVG Tiny, jeśli liczy się dla Ciebie. Niestety wiele SVG narzędzia autorskie i ludzkich autorów nadal się niepotrzebnego korzystania z atrybutu stylu.
Określić jednostki w przypadku przypisania długości do właściwości

SVG wykorzystuje właściwości Styling opisać wiele z jego parametrów dokumentów, takich jak wypełnienia i obrysu szerokości. Właściwości te mogą być ustawione przez CSS lub deklaracji atrybutów prezentacyjnych (atrybutów XML, które mają takie same nazwy, jak nieruchomości i map do swoich odpowiednich właściwości CSS, jeśli realizacja obsługuje CSS). Na przykład w mieście wyświetlacz ten znajduje się na okręgu o zarówno

“><circle style=”display:none;” …>

oraz:

“><circle display=”none” …>

W większości domów nie powinno być kilka problemów interoperacyjności, ale denerwująco gdy właściwości przypisywane są długości wizualny wynik może być zupełnie inna w różnych implementacjach SVG. Powstaje problem, ponieważ pozwala SVG Specyfikacja jednostek długości być pominięte (w którym to przypadku jednostki długości “są jednostki aktualnego układu współrzędnych (jednostki użytkownika)), podczas gdy z drugiej strony wymaga specyfikacji CSS absolutnie jawnie się jednostki danych dla wszystkich wartości długości. Pytanie brzmi, są jednostki wymagane dla długości przypisanych do właściwości w SVG, czy nie? Które specyfikacja ma pierwszeństwo?

Niestety, ten problem jest dużo bardziej złożony niż się początkowo wydaje, a odpowiedzi na te pytania są nadal kwestionowane. Powoduje to, że implementacje nie zgadzam. Niektóre wymagają jednostek, podczas gdy inne nie. Jedynym sposobem na uniknięcie problemów jest zawsze określić jednostkę podczas przypisywania długości do właściwości. Szczęśliwie, w SVG, jednostki px są zdefiniowane jako ekwiwalent jednostek ustanowionych przez aktualnego układu współrzędnych (jednostki użytkownika). Innymi słowy, gdziekolwiek byś inaczej pominięto urządzenie od długości przypisany do własności, użytkowania urządzenia px zamiast. Na przykład, zamiast pisać:

“><text stroke-width=”2″ style=”font-size:20;” …>

napisz:

“><text stroke-width=”2px” style=”font-size:20px;” …>

Zauważ, że jednostki są wymagane tylko w przypadku nieruchomości. tag do not require a unit since they do not map to a CSS property.”>Plain atrybuty, takie jak szerokość i wysokość na atrybuty tagu <rect> nie wymagają urządzenia, ponieważ nie mapować właściwości CSS. Mogą być po prostu przypisany numer i to pośrednio posiada jednostki bieżącego układu współrzędnych.

Według SVG 1,1 Wskaźnik Property istnieje tylko osiem właściwości stosowane do SVG 1.1, który przyjmie wartość długości skoku: szerokość skoku dashoffset, czcionka, font-size, baseline-shift, kerning, letter-spacing oraz word-spacing . To właśnie te właściwości, które należy uważać, aby zawsze określić długość dla.
Użyj świadomości przestrzeni nazw metod DOM

DOM Level 1 Zalecenie zostało utworzone przed oryginalne Przestrzenie nazw w XML rekomendacji został zwolniony, więc nie jest to pamięć BIOS w DOM1 namespace świadomy. Powoduje to problemy dla przestrzeni nazw XML, takich jak SVG. Aby rozwiązać te problemy, DOM Level 2 Core dodania przestrzeni nazw świadome odpowiedniki wszystkich obowiązujących DOM Level 1 metod. Kiedy scripting SVG ważne jest, aby korzystać z przestrzeni nazw świadomych metod. Tabela poniżej DOM1 metod, które nie powinny być używane w SVG wraz z ich odpowiednikami DOM2 odpowiednikami które powinny być używane zamiast.
Pamięć BIOS w DOM1 (nie używać) DOM2 (używać tych zamiast!)
createAttributeNS createAttribute
createElementNS createElement
getAttributeNode getAttributeNodeNS
getAttributeNS getAttribute
getElementsByTagName getElementsByTagNameNS (również dodane do elementu)
getNamedItem getNamedItemNS
hasAttributeNS hasAttribute
removeAttributeNS removeAttribute
removeNamedItem removeNamedItemNS
setAttributeNS setAttribute
setAttributeNode setAttributeNodeNS
setNamedItem setNamedItemNS

Pierwszy argument dla wszystkich przestrzeni nazw metod DOM2 świadomych musi być “Nazwa przestrzeni nazw” elementu lub atrybutu mowa. Dla elementów SVG jest to “http://www.w3.org/2000/svg”. Należy jednak pamiętać, uważnie się Przestrzenie nazw w XML 1.1 stanowi rekomendację, że nazwa przestrzeni nazw atrybutów bez prefiksu nie ma wartości. Innymi słowy, należy użyć null jako nazwę dla przestrzeni nazw SVG atrybutów. W rezultacie, aby utworzyć elementu SVG “rect” używając createElementNS należy napisać:

createElementNS (“http://www.w3.org/2000/svg” “rect”);

Jednak, aby pobrać wartość “X” na elemencie atrybutu SVG “rect” należy napisać:

getAttributeNS (null, ‘x’);

Zauważ, że nie jest to w przypadku atrybutów z innych (nie-SVG) nazw, takich jak XLink: atrybutu href, wykorzystujących namespace prefiks. Ponieważ ma to prefiks przestrzeni nazw w kodzie (“XLink”) to nazwa nazw jest wartość, która została przypisana do tego prefiksu, “http://www.w3.org/1999/xlink”. Dlatego, aby uzyskać wartość XLink: Atrybut href ‘a’ elementu SVG możesz napisać:

getAttributeNS (‘http://www.w3.org/1999/xlink’, ‘href’);

W skrócie zasada jest prosta. Dla elementów z lub bez prefiksu przestrzeni nazw, a dla atrybutów z przedrostkiem przestrzeni nazw, nazwa przestrzeni nazw jest nazw URI elementu / atrybutu mowa. Dla atrybutów bez prefiksu przestrzeni nazw nazwa przestrzeni nazw jest null.
Nie używać getter Adobe i rozszerzeń setter

Dawno, dawno temu, gdy ich pierwszy wydany Adobe SVG Viewer Plug-in, Netscape 4 jeszcze wystarczająca liczba użytkowników, że to ważne, aby być z nim zgodne. Aby to zrobić, że to wydaje się konieczne rozszerzenie interfejsów ECMAScript i zapewnić odpowiednie pobierające i ustawiające metody dla wszystkich właściwości określonych w specyfikacji. W rezultacie w ASV można napisać kod jak poniżej:

. evt.getTarget () getOwnerDocument () getDocumentElement ().;

kiedy DOM i SVG specyfikacje rzeczywiście nie definiować właściwości, metody, więc poprawny sposób napisać ten kod to:

evt.target.ownerDocument.documentElement;

Problem jest, że nikt nie popiera getter ASV i rozszerzeń setter. Skrypty, które odwołuje się do nich nie będzie działać w innych implementacjach SVG. Szczęśliwie Netscape 4 jest teraz bez znaczenia dla większości z nas, a od ASV wspiera właściwości też nowe skrypty SVG może zgodne z normami i pracy we wszystkich implementacjach SVG za pomocą właściwości. (W rzeczywistości starego kodu może i powinien być aktualizowany też.)

Jest to trudne do uzyskania, co listy i nie jest od rozszerzenia ASV istnieje wiele właściwości. Jeśli nie są wystarczająco zaznajomieni ze specyfikacjami wiedzieć, które pobierające i ustawiające metody są określone przez W3C, a które są rozszerzeniami ASV, należy testować swoje skrypty używając innego SVG wdrożenia, takich jak Mozilla Firefox lub batik. Jeśli pojawiają się błędy związane pobierające lub ustawiaczy spróbować użyć właściwości zamiast i zobaczyć czy to rozwiązuje rzeczy. Możesz także wyszukać getter i setter nazwisk w SVG, DOM2 Core, DOM2 wydarzeń i DOM2 Style IDL. Jeśli nie można ich znaleźć w żadnym z tych dokumentów, które prawdopodobnie nie są częścią żadnego standardu W3C.