Wyrównanie obrysu SVG: umieść kontur wewnątrz lub na zewnątrz

Obrys SVG jest wyśrodkowany na swojej ścieżce. Aby kontur o szerokości 12 jednostek znalazł się w całości wewnątrz zamkniętego kształtu, narysuj obrys o szerokości 24 jednostek i przytnij go do tego kształtu. Aby uzyskać kontur o tej samej widocznej szerokości na zewnątrz, narysuj obrys o szerokości 24 jednostek z maską, która ukrywa wnętrze kształtu. Zachowaj kopię oryginalnej ścieżki: przycięcie i maska zmieniają to, co jest widoczne, a nie geometrię, na której opiera się grafika.

Proponowana właściwość stroke-alignment pojawia się w SVG Strokes editor's draft, ale ten projekt dokumentu stwierdza, że definicja obrysu z SVG 2 pozostaje normatywna. Jeśli plik musi działać w różnych przeglądarkach i edytorach, zbuduj i przetestuj widoczny efekt, zamiast polegać na proponowanej właściwości.

Zobacz, gdzie znajduje się narysowany kontur

Ta autorska plakietka o zamkniętym kształcie wykorzystuje tę samą ścieżkę we wszystkich trzech panelach. Jej turkusowe wypełnienie, nominalna szerokość widocznego konturu wynosząca 12 jednostek i otaczająca ją przestrzeń dokumentu pozostają takie same. Koralowa linia przerywana to ścieżka środkowa. W środkowym panelu pokrywa się ona z zewnętrzną krawędzią niebieskiego pasa; po prawej pokrywa się z krawędzią wewnętrzną.

Środkowy panel utrzymuje zewnętrzną granicę narysowanej plakietki na jej pierwotnej ścieżce. Panel z obrysem zewnętrznym powiększa narysowany obszar o 12 jednostek wokół ścieżki. Jeśli plakietka niemal dotyka krawędzi viewBox, ten dodatkowy obszar może zostać ucięty. Poradnik MDN dotyczący wypełnień i obrysów opisuje zwykłe obrysy jako wyśrodkowane na ścieżce; powyższe porównanie przedstawia trzy konstrukcje wyrenderowane w tym samym rozmiarze.

Utwórz kontur wewnętrzny za pomocą przycięcia

Umieść zamkniętą ścieżkę w <defs>. Wykorzystaj ją ponownie raz jako wypełnienie, a raz jako obszar przycięcia. Narysuj drugą kopię z obrysem o szerokości dwukrotnie większej od docelowej, a następnie ogranicz ten obrys do wnętrza ścieżki. Przycięcie sprawia, że wszystko poza jego kształtem staje się niewidoczne; nie usuwa ukrytej połowy obrysu. Zobacz dokumentację MDN dotyczącą clipPath i nasz poradnik dotyczący współrzędnych clipPath, jeśli zaimportowany obszar przycięcia przesuwa się względem grafiki.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Tutaj obrys o szerokości 24 jednostek zwykle sięga 12 jednostek w każdą stronę od ścieżki. Przycięcie ukrywa jego zewnętrzną połowę, pozostawiając wewnątrz widoczny pas o szerokości 12 jednostek. Umieść wypełnienie pod przyciętym obrysem, tak jak w przykładzie, jeśli chcesz, aby cały wewnętrzny pas pozostał widoczny. W przypadku ścieżek złożonych z otworami sprawdź reguły wypełnienia i przycięcia, zanim założysz, która strona stanowi wnętrze.

Utwórz kontur zewnętrzny za pomocą maski

Pas zewnętrzny wymaga odwrócenia obszaru widoczności. Poniższa maska jest biała na obszarze dokumentu i czarna wewnątrz plakietki. Jest stosowana wyłącznie do kopii z obrysem, a kopia bez maski zapewnia wypełnienie. Jawnie określony obszar maski pozostawia miejsce na obrys poza pierwotnym kształtem.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Ponownie widoczna pozostaje tylko połowa wyśrodkowanego obrysu o szerokości 24 jednostek, więc widoczny pas zewnętrzny ma szerokość 12 jednostek. Świadomie określ obszar maski: dokumentacja MDN opisuje, jak maskUnits, maskContentUnits i wymiary obszaru wpływają na maskę. Biały prostokąt musi obejmować cały obrys zewnętrzny. Zbyt mała maska może przyciąć właśnie tę krawędź, którą chcesz zachować.

Dla nieprzezroczystego wypełnienia istnieje krótszy trik wizualny: narysuj obrys o podwójnej szerokości, a następnie narysuj na nim wypełnienie za pomocą paint-order="stroke fill". Ukrywa to wewnętrzną połowę pod wypełnieniem, ale obrys nadal tam istnieje i może pojawić się ponownie, jeśli wypełnienie stanie się półprzezroczyste lub zostanie usunięte. MDN wyjaśnia kolejność rysowania. Użyj jawnie zdefiniowanej maski, gdy pas zewnętrzny musi pozostać odrębną widoczną konstrukcją. Jeśli chcesz uzyskać kontur na podstawie całej sylwetki wielokolorowej grafiki określonej przez kanał alfa, zobacz kontury SVG tworzone za pomocą morfologii; ten filtr zmienia wygląd, zachowując ścieżki źródłowe.

Sprawdź SVG po imporcie

Przycięcia i maski wpływają na renderowanie, natomiast aplikacja używana na dalszym etapie może wymagać wypełnionych konturów. Zachowaj edytowalny plik główny i przetestuj kopię do przekazania w rzeczywistym środowisku docelowym:

1. Otwórz sam plik SVG, a następnie umieść go w docelowym edytorze lub aplikacji produkcyjnej. Porównaj krawędzie wewnętrzne i zewnętrzne przy tym samym powiększeniu.
2. Sprawdź viewBox lub obszar roboczy wokół wersji zewnętrznej. Zostaw miejsce na jej pas wychodzący na zewnątrz o 12 jednostek oraz wszelkie łączenia w ostrych narożnikach.
3. Sprawdź listę obiektów. Przykłady zawierają ścieżki do wielokrotnego wykorzystania, przycięcie lub maskę oraz edytowalny obrys. Nie tworzą jednego wypełnionego konturu.
4. Jeśli odbiorca potrzebuje geometrii z wypełnieniem, przekształć zaznaczony obrys w kopii do przekazania i sprawdź powstałe kształty. Zachowaj źródło z edytowalnym obrysem, aby móc później zmieniać jego szerokość.

Jeśli linia znika podczas eksportu, skorzystaj z listy kontrolnej widoczności obrysu, aby rozróżnić brak narysowanego obrysu, przycięcie i problemy z obsługą importu. Jeśli obrys niespodziewanie zakrywa wypełnienie, nasze wyjaśnienie paint-order w SVG pokazuje, która warstwa jest rysowana jako ostatnia.

Gdzie przydaje się PerfectVector

Te kroki zaczynają się od edytowalnej ścieżki SVG. Jeśli logo istnieje tylko jako PNG lub JPG, proces wektoryzacji logo w PerfectVector może utworzyć wstępną wersję SVG, zanim dodasz przycięcie lub maskę. Porównaj jej sylwetkę, narożniki i wszelkie otwory z oryginałem w docelowym rozmiarze przekazywanej grafiki. Wektoryzacja odtwarza proponowaną geometrię; nie ustawia za Ciebie wyrównania obrysu do wewnątrz ani na zewnątrz.

Jeśli masz dostęp do oryginalnej ścieżki SVG, edytuj ją bezpośrednio. Trasowanie jej zrzutu ekranu dodałoby zbędny etap rekonstrukcji i mogłoby zmienić granicę, do której próbujesz wyrównać obrys. Nasz poradnik wektoryzacji logo pomaga wybrać między trasowaniem, ponownym rysowaniem a zachowaniem istniejącego wektorowego pliku głównego.

Najczęściej zadawane pytania

Czy SVG obsługuje wyrównanie obrysu do wewnątrz lub na zewnątrz? Roboczy projekt specyfikacji SVG Strokes opisuje te wartości, ale stwierdza, że definicja obrysu z SVG 2 pozostaje normatywna. Aby przekazywany plik działał w różnych środowiskach, użyj przetestowanego przycięcia lub maski, zamiast polegać na właściwości z projektu specyfikacji.

Dlaczego podwajam szerokość obrysu? Połowa szerokości zwykłego obrysu przypada na każdą stronę ścieżki. Przycięcie lub maska ukrywa jedną połowę. Dlatego w tych przykładach obrys o szerokości 24 jednostek pozostawia widoczny pas wewnętrzny lub zewnętrzny o szerokości 12 jednostek.

Czy przycięcie do wnętrza lub maska zewnętrzna utworzy kontury gotowe do cięcia? Nie. Zmieniają one renderowany wygląd, a ścieżka i obrys, na których opiera się grafika, pozostają. Jeśli ploter tnący lub wykonawca potrzebuje wypełnionych konturów, utwórz osobną kopię do przekazania, przekształć obrys w ścieżki w odpowiednim edytorze i sprawdź geometrię po imporcie.

Źródła

1. MDN — Fills and strokes — Definiuje renderowanie wyśrodkowanego obrysu i omówione tutaj działanie kolejności rysowania.
2. W3C SVG Working Group — SVG Strokes editor's draft — Określa proponowane wartości wyrównania i status projektu dokumentu względem SVG 2.
3. MDN — clipPath element — Definiuje sposób, w jaki konstrukcja wewnętrzna ogranicza widoczność.
4. MDN — mask element — Definiuje obszar maski i atrybuty współrzędnych użyte w konstrukcji zewnętrznej.
5. Alex Chan — Drawing inner/outer strokes in SVG — Demonstruje metodę z przycięciem i maską obrysu o podwójnej szerokości, która posłużyła jako punkt wyjścia dla naszego autorskiego przykładu plakietki.

Jeśli Twoje logo nadal jest obrazem rastrowym, utwórz wstępną wersję SVG za pomocą PerfectVector, sprawdź granicę jej ścieżki, a następnie wypróbuj konstrukcję wewnętrzną lub zewnętrzną w swoim edytorze i zweryfikuj przekazywany plik w jego docelowym środowisku.