Zmeňte farbu v parametri svg get. SVG a tieňový DOM. Úprava obsahu pomocou vlastnosti CSS all

Príprava SVG na použitie na webe je veľmi jednoduchý proces, ktorý nie je náročnejší ako export JPEG alebo PNG. Použite ľubovoľný editor obrázkov, na ktorý ste zvyknutí (Illustrator, Sketch, Inkscape [zadarmo] atď. [alebo dokonca Photoshop, ak používate vrstvy tvarov]) vo veľkosti obrázka, ktorú plánujete použiť. Zvyčajne pracujem v Illustratore, takže vysvetlím niektoré spôsoby prípravy súborov v tomto programe, ale vo všeobecnosti sú použiteľné v akomkoľvek inom programe. Možno budete chcieť previesť text na obrysy, pretože písmo sa s najväčšou pravdepodobnosťou nevykreslí správne, pokiaľ ho neplánujete upraviť podľa webového písma použitého na stránke (čo je možné!). Tiež nie je dobrý nápad premeniť všetky objekty na jednotlivé tvary, najmä ak máte ťah, ktorý budete musieť ovládať na stránke, najmä preto, že konverziou objektov sa často nezníži veľkosť súboru. Akékoľvek názvy priradené skupinám alebo vrstvám budú pridané do SVG ako ID prvku. Je to celkom praktické na styling, ale trochu sa zvýši Celková veľkosť súbor.

Pred exportom musíte skontrolovať, či sú všetky obrázky v celočíselnej pixelovej mriežke (teda napríklad nie 23,3px × 86,8px ). V opačnom prípade s najväčšou pravdepodobnosťou nebude mať obrázok dostatočnú jasnosť a časť obrázka bude orezaná. Môžete to urobiť v aplikácii Illustrator nasledujúcim spôsobom: Objekt > Umelecké plátna > Prispôsobiť hraniciam umeleckého diela . Potom kliknite na uložiť ako a vyberte SVG a ponechajte predvolené nastavenia. Tu je potrebné urobiť trochu optimalizácie, ale naozaj to nestojí za to, keďže neskôr budeme aplikovať rôzne vylepšenia, takže nateraz nebudeme strácať čas týmito vychytávkami.

Techniky na zníženie veľkosti súborov.

(Pozri optimalizáciu)

Dosiahnuť najmenšia veľkosť SVG , bolo by logické z neho odstrániť všetko nepotrebné. Najznámejšie a užitočný program(aspoň si to myslím) pre spracovanie SVG je to SVGO . Odstráni všetko požadovaný kód. Ale! Buďte opatrní pri používaní tohto programu, ak plánujete manipulovať so SVG pomocou CSS/JS, pretože môže príliš vyčistiť váš kód, čo sťaží ďalšie zmeny. Výhodou SVGO je aj to, že môže byť zahrnuté do procesu automatická montáž projekt, ale môžete použiť aj GUI Ak chceš.

Podrobnejšie s správne odstránenie všetko zbytočné, môžeme urobiť niečo iné v grafický editor. Najprv sa musíte uistiť, že používate čo najmenej ciest/tvarov, ako aj bodov na týchto cestách. Môžete kombinovať a zjednodušovať všetko, čo sa zjednodušiť dá, a všetko odstrániť zbytočné body. Illustrator má doplnok VectorScribe s nástrojom Smart Remove kefa, ktorý vám pomôže odstrániť bodky a zároveň zachovať celkový tvar.

Predoptimalizácia

Nástroj Smart Remove Brush Tool odstránil bodky

Ďalej obrázok zväčšíme. V aplikácii Illustrator je vhodné zapnúť zobrazenie mriežky pixelov View > Pixel Preview a skontrolovať, ako sú cesty usporiadané. Umiestniť cesty na mriežku bude chvíľu trvať, ale námaha sa vyplatí a výsledkom bude ostrejšie vykreslenie (je lepšie si na to dať pozor vopred).

Body mimo mriežky

Zarovnanie mriežky

Ak existujú dva alebo viac objektov na zarovnanie, potom stojí za to odstrániť všetky zbytočné prekrytia. Niekedy, aj keď sú kontúry starostlivo zarovnané, môže byť viditeľná tenká biela čiara. Aby ste tomu zabránili, môžete predmety v miestach prekrytia mierne prekrývať. Dôležité: V SVG má z-index určité poradie, ktoré závisí od objektu, ktorý je naspodku, takže sa oplatí umiestniť horný objekt na spodok súboru v kóde.

A nakoniec, v neposlednom rade, na čo sa väčšinou zabúda, je aktivácia gzip kompresia SVG na vašej stránke v súbore .htaccess.

AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... atď

Ako príklad efektívnosti tejto techniky použijem pôvodné logo Breaking Borders a optimalizujem ho týmto spôsobom: zväčšiť veľkosť na to, čo by malo byť; dám do poriadku kontúry; Zmažem maximálny možný počet bodov; presúvať body po celých pixeloch; presuňte všetky prekrývajúce sa oblasti a pošlite to všetko do SVGO.

Originál: 1 413b

Po optimalizácii: 409b

V dôsledku toho sa veľkosť súboru zmenšila o ~ 71 % (a o ~ 83 % po komprimácii)

SVG je nový štandard pre vektorové obrázky v prehliadači. Vektorové editory ako Adobe Illustrator umožňujú priamo ukladať grafiku v tomto formáte a moderné prehliadače bez problémov zobrazujú SVG.

Keďže obrázky SVG sa skladajú zo značiek, možno ich vytvárať a udržiavať pomocou vašich obľúbených textový editor, rovnako ako to robíte s HTML. A čo viac, je dokonca možné upraviť SVG pomocou CSS, aj keď budete musieť poznať rozdiely medzi štýlmi SVG a HTML.

Atribúty SVG a vlastnosti CSS

Hranica medzi HTML a CSS je jasná. HTML je zodpovedné za obsah a štruktúru, CSS za zobrazenie. V SVG je táto čiara prinajmenšom rozmazaná. Toto je hlavný dôvod textové polia a tvary sa zvyčajne ovládajú pomocou atribútov prvkov, nie pomocou CSS:

V tomto príklade kreslíme obdĺžnik, ktorý je vyplnený atribútom fill. Farba a šírka vonkajšieho okraja obdĺžnika je nastavená atribútmi ťah a šírka ťahu. Obdĺžnik však môžete upraviť aj takto pomocou CSS:

Použili sme iba atribúty, ako sú vlastnosti CSS. Aj keď to nefunguje pre všetky atribúty. Týmto spôsobom nebudete môcť nastaviť hodnoty polohy a šírky a výšky. Použijeme iba atribút y, ako aj šírku a výšku .

Rovnako ako v HTML môžeme pracovať s triedami alebo ID ľubovoľného prvku. Preto by sme definovali reprezentáciu mnohých prvkov SVG prostredníctvom štýlovej triedy.

Keďže SVG nerozlišuje medzi oblasťami hlavy a tela, štýly a samotný obsah zdieľajú prvok SVG, ktorý je porovnateľný s prvkom HTML.

Používanie Pseudotried

V SVG je možné použiť pseudotriedy ako :hover , dokonca aj v spojení s vlastnosťou prechodu CSS3.

Implementáciou tohto príkladu uvidíme, že keď umiestnime kurzor myši na prvok s pridelenou triedou príkladu, farba výplne sa zmení z červenej na modrú. Aby to fungovalo správne, nevkladajte SVG s img tag. Lepšie použitie vloženia alebo prvku iframe:

Pri použití značky img sa správne zobrazí samotný SVG. ale efekt vznášania a prechody budú ignorované. Okrem vlastnosti prechodu môžeme použiť aj transform . V tomto prípade budú prvky zmenšené alebo otočené.

Pri používaní CSS3 nezabudnite pridať predpony dodávateľa, aby ste zabezpečili podporu pre čo najviac moderných prehliadačov. Zatiaľ čo Chrome a Firefox zvládajú vykresľovanie bezchybne, Internet Explorer odmieta zobraziť váš výtvor, aj keď je dokonale schopný zobraziť tieto vlastnosti CSS3, keď sa použije na HTML.

Mediálne dotazy a SVG

Ak chcete, aby sa váš SVG prispôsobil konkrétnym rozlíšeniam, stačí použiť mediálne dopyty priamo v ňom:

V tomto príklade sa prvky, ktoré majú triedu príkladu, nezobrazia, akonáhle je viditeľná šírka obrazovky menšia ako 800 pixelov. Pozor, nejde o šírku dokumentu, ale o šírku prvku nosiča SVG.

Táto stránka ukazuje, ako používať CSS so špeciálnym jazykom na vytváranie grafiky: SVG.

Urobíš malý príklad, ktorý je možné spustiť v akomkoľvek prehliadači, ktorý podporuje SVG.

Všeobecné informácie: SVG

SVG(Scalable Vector Graphics) je podmnožinou jazyk XML a je určený na vytváranie grafiky.

SVG je možné použiť na statické obrázky, ako aj na animácie a vytváranie používateľských rozhraní.

Podobne ako iné jazyky založené na XML, aj SVG podporuje používanie tabuliek. css štýly, čo umožňuje oddeliť rôzne možnosti vizuálne zobrazenie z dátovej štruktúry.

Okrem toho môžu odkazovať na šablóny štýlov, ktoré používate v iných značkovacích jazykoch dokumentov SVG grafika, kde je potrebný obrázok. Napríklad v hárku štýlov pre váš dokument HTML môžete zadať odkaz (URL) na grafiku SVG vo vlastnosti pozadia.

Pustite sa do práce: SVG demo

Vytvorte nový dokument SVG ako normálne textový súbor, doc8.svg . Skopírujte a prilepte obsah bloku nižšie, nezabudnite sa posunúť úplne, aby ste skopírovali všetko:

Vytvorte nový css súbor, štýl8.css . skopírujte a prilepte obsah bloku nižšie, nezabudnite sa posunúť úplne, aby ste skopírovali všetko:

/*** Ukážka SVG ***/ /* stránka */ svg ( farba pozadia: béžová; ) #nadpis (veľkosť písma: 24px; váha písma: tučné; ) #caption (veľkosť-písma: 12px; ) /* kvet */ #flower:hover ( kurzor: krížik; ) /* gradient */ #fade-stop-1 ( stop-color: modrá; ) #fade-stop-2 ( stop-color: white; ) /* vonkajšie okvetné lístky */ #vonkajšie okvetné lístky ( nepriehľadnosť: 0,75; ) #vonkajšie okvetné lístky .segment-fill ( výplň: azúrová; ťah: svetlá oceľovomodrá; šírka-šírka ťahu: 1; ) #vonkajšie-okvetné lístky .segment-okraj ( výplň: žiadny; ťah: tmavomodrá; šírka ťahu: 3; ) #vonkajšie okvetné lístky .segment:vznášanie > .výplň segmentu (výplň: slivka; ťah: žiadny; ) #vonkajšie okvetné lístky .segment:vznášanie sa > .hrana segmentu ( : slateblue; ) /* vnútorný okvetný lístok */ #vnútorné-okvetné lístky .segment-výplň ( výplň: žltá; ťah: žltozelený; šírka ťahu: 1; ) #vnútorné-okvetné lístky .segmentový okraj ( výplň: žiadny; ťah: žltozelená; šírka ťahu: 9; ) #vnútorné-okvetné lístky .segment:umiestnenie > .výplň segmentu (výplň: tmavozelená; ťah: žiadny; ) #vnútorné-okvetné lístky .segment:umiestnenie > .okraj segmentu (ťah: zelená; )

Otvorte dokument vo svojom prehliadači s povoleným SVG. Presuňte ukazovateľ myši nad obrázok.

Táto wiki nepodporuje vkladanie SVG do stránok, takže to tu nemôžeme demonštrovať. Obrázok bude vyzerať takto:

Čo bude ďalej?

V tejto ukážke váš prehliadač s podporou SVG už vie, ako vykresliť prvky SVG. Šablóna štýlov len nejakým spôsobom zmení zobrazenie. To isté sa deje s HTML dokumenty a XUL. CSS však možno použiť na ľubovoľné XML dokumenty, ktoré nemajú predvolený spôsob zobrazenia položiek. Tento príklad zobrazené na nasledujúcej stránke:

CSS je každým dňom výkonnejšie, existuje veľa nových funkcií, pomocou ktorých môžete vytvárať používateľské rozhrania oveľa lahšie. A to je skvelé!

Jednou z takýchto funkcií v CSS sú filtre. Skúsme použiť filtre na prácu s obrázkami SVG.

CSS filtre

Najprv sa pozrime na filtre. Zahŕňajú nasledujúce funkcie:

• rozmazať()
• jas()
• kontrast()
• Vrhať tieň()
• odtiene sivej()
• hue-rotate()
• invertovať ()
• nepriehľadnosť()
• nasýtiť()
• sépia()

CSS filtre predstavujú najjednoduchší spôsob implementácie základných transformácií čo najefektívnejším spôsobom pre prehliadač.

Ak chcete vidieť, ako jednotlivé filtre fungujú, odporúčame navštíviť stránku: cssfilters.co.

Úprava pozadia SVG

Milujem používanie formátu SVG (škálovateľná vektorová grafika) na webe. SVG je skvelý obrazový formát pre web. Keď pridáte SVG na stránku, máte prístup ku každému prvku a vlastnostiam v nej. Umožňuje pridávať animácie, meniť farby, dynamicky pridávať informácie. SVG je tiež skvelé pre ikony.

SVG sa často používa ako obrázky na pozadí. AT tento prípad stratíte kontrolu nad prvkami obrázka. Teraz nemôžete meniť farby, vlastnosti, pretože SVG sa stáva normálnym obrázkom. Ale s pomocou CSS filtre môžete tento problém vyriešiť.

Ovládanie jasu

Prvá vec, s ktorou som sa pri práci s ikonami stretol, bola potreba stmaviť bielu ikonu na svetlom pozadí. Aby sa nevytvorila nová tmavá ikona, použil som filter: jas().

Hodnota jasu väčšia ako 1 spôsobí, že prvok bude svetlejší, hodnota menšia ako 1 spôsobí, že prvok bude tmavší.

Ikony s farbou #000 alebo rbg(0, 0, 0) nebude osvetlená. Musia mať akúkoľvek inú farbu.

Úprava farieb

Pozreli sme sa na to, ako zmeniť jas ikony. Čo ak však chceme zmeniť farbu ikony? V tomto prípade nám pomôže filter sépia, odtieň-otočiť, jas a nasýtenia vytvoriť akúkoľvek farbu, ktorú chceme.

Z bielej vytvoríte napríklad modrú, azúrovú a ružovú.

Colorize-pink ( filter: jas(0.5) sepia(1) hue-rotate(-70deg) saturate(5); ) .colorize-navy (filter: bright(0.2) sepia(1) hue-rotate(180deg) saturate( 5)

Kompatibilita

V čase písania tohto článku sú filtre podporované nasledujúcimi prehliadačmi:

Namiesto záveru

Nikdy nezabudnite na svojich používateľov. Zatiaľ nie všade filtre fungujú. Preto nepoužívajte biele ikony s filtrami na bielom pozadí, pretože niektorí používatelia jednoducho nič neuvidia. Tiež nezabudnite na alternatívny text pri obrázkoch.