Wyśrodkuj logo optycznie, zachowując plik główny

Aby optycznie wyśrodkować logo, najpierw wyśrodkuj geometrycznie widoczną grafikę w docelowej ramce. Następnie porównaj małą korektę położenia z ukrytymi prowadnicami i w rozmiarze, który zobaczą odbiorcy. Zachowaj ten sam kształt logo w obu wersjach. Zapisz zaakceptowane przesunięcie jako decyzję o położeniu, aby wektorowy plik główny pozostał niezmieniony.

Centrowanie optyczne to wizualna korekta położenia wykonywana, gdy jednakowe marginesy geometryczne nie dają zamierzonej równowagi. Wymaga oceny danego kształtu w danym otoczeniu. Obliczenie środka ciężkości lub stałe przesunięcie pikselowe mogą wskazać punkt wyjścia, ale nie określają uniwersalnego optimum wizualnego.

Przykład wykorzystuje jeden autorski asymetryczny znak w ramce 200 na 140. Szeroki lewy korpus i wąska prawa końcówka ułatwiają pomiar równych granic i porównanie położeń. Poniższe pliki odtworzysz bez płatnej aplikacji projektowej.

Ustal bazę geometryczną przed oceną równowagi

Prostokąt ograniczający to najmniejszy prostokąt zgodny z osiami obejmujący mierzoną geometrię. Jego środek przydaje się do początkowego położenia. Nie opisuje ilości wypełnionej powierzchni po każdej stronie ani części przyciągającej uwagę.

Przykłady projektowania optycznego Rafała Tomala pokazują przypadki położenia wizualnego innego niż wyrównanie liczbowe. Uzasadniają porównanie rzeczywistego wyniku, ale nie podają jednej korekty dla każdego logo.

Przed zmianą położenia sprawdź, czy wyrównujesz grafikę, a nie przypadkowo powiększony pustymi marginesami plik. Szeroka pusta ramka może sprawić, że nawet symetryczne logo wygląda źle. Sprawdź obszar roboczy, usuń niezamierzone fragmenty tła i potwierdź obiekty należące do pełnego znaku. Zachowaj zatwierdzone pole ochronne zamiast je przycinać.

W pomiarach SVG getBBox() zwraca granice w układzie użytkownika elementu bez jego własnych i nadrzędnych transformacji. Pomiary viewportu przeglądarki odpowiadają na inne pytanie. Poradnik prostokąta ograniczającego SVG wyjaśnia oddzielanie tych pomiarów.

Porównaj niezmieniony znak w równych ramkach

Oryginalna ścieżka poniżej biegnie od x = 20 do 140 i od y = 20 do 80. Granice mają więc 120 na 60, ze środkiem (80, 50). Środek ramki to (100, 70). Przesunięcie grupy o (20, 20) centruje te granice.

Zapisz jako logo-geometric.svg i otwórz w przeglądarce. Blady prostokąt jest ramką położenia, a nie częścią logo.

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="140" viewBox="0 0 200 140">
  <rect x="0.5" y="0.5" width="199" height="139"
        rx="8" fill="#f7f9fc" stroke="#cad4e2"/>
  <g transform="translate(20 20)">
    <path fill="#193b59"
          d="M20 20H70V35H140L70 55V80H20Z"/>
  </g>
</svg>

Widoczna grafika rozciąga się teraz od x = 40 do 160 i od y = 40 do 100, co daje równe poziome i pionowe marginesy 40 jednostek. To punkt odniesienia, a nie wymóg zachowania końcowego położenia.

Do próbnego położenia optycznego zapisz drugi plik z transform="translate(32 20)". Przesunięcie o 12 jednostek w prawo zmienia tylko położenie. Zachowaj identyczne d ścieżki, wypełnienie, ramkę i rozmiar wyświetlania. Translacja SVG przesuwa układ współrzędnych; nie wymaga przepisywania ścieżki.

Naszą redakcyjną preferencją w tej ramce jest próba przesunięta w prawo: szeroki lewy korpus znajduje się bliżej środka ramki, a wąska końcówka wystaje dalej w prawo. W innym układzie możesz preferować wersję geometryczną. Porównaj obie z rzeczywistą otaczającą treścią przed udokumentowaniem wyboru.

Sprawdź położenie bez prowadnic i w rozmiarze użycia

Porównuj w rzeczywistej ramce i na docelowym tle. Ukryj linie środkowe i nakładki granic przed oceną; inaczej możesz patrzeć na zmierzone marginesy zamiast na znak.

1. Otwórz wersję geometryczną i próbną w identycznych rozmiarach.
2. Oglądaj po jednej w docelowym układzie, a potem porównaj razem.
3. Sprawdź mniejsze położenie, w którym logo rzeczywiście wystąpi. Zachowaj proporcje ramki i otaczającą treść.
4. Potwierdź zachowanie zatwierdzonego pola ochronnego i brak przycinania.
5. Zapisz wybrane przesunięcie i zastosowanie, do którego należy. Wróć do bazy geometrycznej, jeśli próba tworzy nową nierównowagę.

Przy ramce szerokiej na 200 px przesunięcie 12 jednostek to 12 px. Przy ramce 100 px ten sam ruch SVG wynosi 6 px. Skaluje się z viewBox. Dodanie oddzielnego stałego przesunięcia CSS 12 px przy każdym rozmiarze stworzyłoby inną regułę.

Uwaga o metodzie: wyrenderowaliśmy oba kompletne SVG w Chromium, porównaliśmy granice viewportu przy szerokościach 200 px i 100 px oraz potwierdziliśmy identyczne dane ścieżek. Wersja geometryczna miała marginesy lewy i prawy po 40 px w pełnym rozmiarze. Próba miała 52 px z lewej i 28 px z prawej oraz względne przesunięcie 6 px przy połowie rozmiaru. To kontrole geometrii i porównanie redakcyjne, a nie badanie ludzkiej percepcji.

Jeśli logo zmienia kształt między wersjami, przywróć plik główny i zmień tylko transformację położenia. Jeśli próba przycina końcówkę, sprawdź viewport i przesunięcie przed zmianą logo. Jeśli inne zestawienie lub tło zmienia równowagę, oceń to użycie oddzielnie. Dopasowanie do szerszej lub wyższej ramki opisuje poradnik responsywnego zestawienia logo SVG.

Zachowaj oryginalny plik główny i decyzję o położeniu

Przechowuj źródłowe logo niezależnie od opakowania położenia w układzie. Dokumentuj wymiary ramki, rozmiar odniesienia, transformację i tło. Dla przykładu przydatna notatka brzmi: „Oryginalny znak 120 na 60; ramka 200 na 140; próbna transformacja (32, 20); ponowna ocena dla innych zestawień”.

Zatwierdzony zasób marki może już zawierać korekty optyczne w kształcie lub eksportowanych granicach. Użyj dostarczonego pliku i jego zasad położenia. Nie przeprojektowuj istniejącego logo tylko dlatego, że zmierzone marginesy są nierówne.

Położenie całego znaku różni się też od centrowania aktywnego tekstu względem linii bazowej. Jeśli problem dotyczy etykiety w kontrolce, użyj poradnika pionowego wyrównania tekstu SVG. Pozostały proces źródła i przekazania opisują poradniki bloga.

Gdzie PerfectVector pomaga przed rozmieszczeniem

PerfectVector może pomóc odzyskać kształty wektorowe z logo rastrowego przed porównaniem położeń. Najpierw sprawdź odzyskaną sylwetkę, otwory i zbędne fragmenty tła względem oryginalnego wzorca. Proces wektoryzacji logo dostarcza etap odzyskiwania źródła; decyzja o optycznym położeniu pozostaje twoja.

Jeśli masz zatwierdzony wektorowy plik główny, umieść go bezpośrednio. Jeśli trasowanie zmienia celową asymetryczną cechę, popraw geometrię źródła przed oceną centrowania. Poradnik wektoryzacji logo opisuje kontrolę. Skalowalny plik ułatwia poprawki położenia, ale nie decyduje, co ludzie uznają za zrównoważone.

FAQ

Czy asymetryczne logo powinno mieć równe marginesy?

Równe marginesy dają mierzalną bazę geometryczną. Konkretne asymetryczne logo może lepiej wyglądać z udokumentowanym przesunięciem. Porównaj w docelowym rozmiarze i zachowaj zatwierdzoną grafikę bez zmian.

Czy środek ciężkości logo jest jego środkiem optycznym?

Geometryczny środek ciężkości opisuje określony rozkład geometrii lub powierzchni. Może pomóc w próbnym położeniu, ale nie określa postrzeganej równowagi każdego logo w każdej ramce i na każdym tle.

Czy zmienić ścieżkę, aby przesunąć logo?

Dla porównania położenia zachowaj oryginalną ścieżkę i użyj oddzielnej transformacji lub pozycji układu. Chroni to plik główny i ułatwia porównanie lub cofnięcie korekty.

Źródła

1. Rafal Tomal — optyczne doskonalenie projektu — autorskie przykłady wizualnych korekt projektanta innych niż wyrównanie liczbowe.
2. MDN — SVGGraphicsElement getBBox() — wyjaśnia granice lokalnego układu do bazy geometrycznej.
3. MDN — SVG transform — opisuje przesuwanie niezmienionej ścieżki przez grupę położenia.

Jeśli logo zachowało się tylko jako raster, odzyskaj kształty wektorowe za pomocą PerfectVector. Sprawdź sylwetkę względem wzorca, porównaj położenie geometryczne i optyczne w rozmiarze użycia i zapisz wybrane przesunięcie oddzielnie od pliku głównego.