Novinky

Úvod

Jako front-end inženýr se často setkáváte s úpravou SVG souborů manuálně. Ovšem ponoření se do ručního kódování SVG může být transformativní zkušeností. Tento článek, napsaný Myriam Frisano, prozkoumává základy ručního kódování SVG s praktickými příklady, které pomohou pochopit vnitřní fungování běžných SVG elementů.

Cesta do Ručního Kódování SVG

Minulou zimu jsem se během projektu na vytvoření Kaligrafických Mřížek hluboce ponořila do specifikací SVG. Přestože jsem měla základní představu o strukturách a pravidlech SVG, právě během tohoto projektu jsem plně pochopila význam a interakci jednotlivých čísel. Jakmile porozumíte základům, může být ruční kódování SVG velice zajímavé a dokonce i zábavné.

Rozsah tohoto Průvodce

Tento průvodce se zaměřuje na praktické příklady jednoduchých SVG, přičemž se vyhýbá složitějším tvarům jako jsou cesty. Pro kresbu křivek jsou doporučované nástroje jako Illustrator nebo Affinity, avšak pokud máte zájem o složené linie, cesty mohou být užitečné a možná je pokryjeme v budoucí části tohoto průvodce.

Jak Funguje SVG?

Předtím, než se pustíte do kreslení SVG elementů, je klíčové pochopit, jak fungují jednotky v SVG. Krása SVG spočívá v jeho vektorovém formátu, což znamená, že jednotky jsou vztaženy k souřadnicovému systému spíše než k prohlížeči.

Jednotky v SVG

V SVG nepoužíváte jednotky jako `px`, `rem` nebo `em`. Místo toho používáte čísla k definování velikosti a umístění elementů. Například šířka a výška SVG může být definována pomocí CSS jednotek, ale uvnitř `viewBox`, jednotky jsou jen konceptem pro ustanovení vztahů velikosti.

Kreslení SVG Elementů

Kreslení SVG elementů často zahrnuje jednoduché aritmetické výpočty a někdy i složitější matematiku, jako je trigonometrie, obzvláště pro složitější návrhy jako kaligrafická mřížka.

Použití JavaScriptu pro Přehlednost

Aby byl SVG kód přehlednější, je užitečné použít JavaScript. Pojmenováním souřadnic významnými názvy a použitím šablon ve stylu JSX pro interpolaci se kód stává snáze srozumitelným.

Příprava SVG Kontejneru

Začněte tím, že vytvoříte HTML kontejner pro vaše SVG:

<div data-svg-container></div>
<script src="template.js"></script>

Kreslení Obdélníku

Zde je příklad, jak nakreslit obdélník, který pokrývá celé `viewBox` pomocí vanilla JavaScriptu:

const container = document.querySelector('[data-svg-container]');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 100 100');
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '0');
rect.setAttribute('y', '0');
rect.setAttribute('width', '100');
rect.setAttribute('height', '100');
rect.setAttribute('fill', 'blue');
svg.appendChild(rect);
container.appendChild(svg);

Metoda 3: Nejlepší z Obou Světů

Integrovanější přístup je vytvořit SVG jako DOM element a nastavit jeho obsah přes `innerHTML`. Tato metoda umožňuje správné kontroly typů a přístup k SVG elementům.

const container = document.querySelector('[data-svg-container]');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 100 100');
container.appendChild(svg);

svg.innerHTML = `
  <rect x="0" y="0" width="100" height="100" fill="blue" />
`;

Kreslení Základních Elementů

Kreslení Čar

SVG obsahuje `` element, který používá atributy `x1`, `y1`, `x2`, a `y2`, což jsou souřadnice začátku a konce čáry.

Pro nakreslení horizontální čáry zajistěte, že hodnoty `y` jsou stejné:

<line x1="10" y1="50" x2="90" y2="50" stroke="black" stroke-width="2" />

Pro vertikální čáru zajistěte, že hodnoty `x` jsou stejné:

<line x1="50" y1="10" x2="50" y2="90" stroke="black" stroke-width="2" />

Praktické Příklady a Zapojená Matematika

Každý příklad v tomto průvodci zahrnuje jednoduché matematické výpočty a je dostupný na CodePen pro snazší referenci. Zde je příklad použití proměnných a jednoduché matematiky pro nakreslení SVG elementu:

const container = document.querySelector('[data-svg-container]');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 100 100');
container.appendChild(svg);

const width = 100;
const height = 100;
const rectWidth = width * 0.8;
const rectHeight = height * 0.8;
const rectX = (width - rectWidth) / 2;
const rectY = (height - rectHeight) / 2;

svg.innerHTML = `
  <rect x="${rectX}" y="${rectY}" width="${rectWidth}" height="${rectHeight}" fill="blue" />
`;

Závěr

Ruční kódování SVG se na první pohled může zdát náročné, ale s praktickými příklady a jasným pochopením základní matematiky se stává zvládnutelným a příjemným úkolem. Tento průvodce poskytuje základy pro kreslení jednoduchých SVG elementů a vytváří cestu pro složitější návrhy v budoucnu. Pro ty, kteří mají zájem o hlubší ponoření do specifikací SVG, je článek „Praktický průvodce SVG a designových nástrojů“ vřele doporučen.