Kun meillä on mitä kutsumme SVG: n "defs blockiksi" - SVG: n palaksi, joka määrittelee kaikki asiat, jotka haluamme piirtää myöhemmin - mihin laitamme sen? Toistaiseksi olemme asettaneet sen suoraan HTML-koodiin, ja se toimii ehdottomasti. Jos jätämme sen sivun yläosaan, sano heti alkutunnisteen jälkeen:
Se toimii hyvin kaikissa selaimissa, jotka tukevat SVG: tä.
Saattaa olla houkuttelevaa siirtää tämä alas. Ehkä kuvakkeet eivät ole erityisen tärkeitä sivulle, eivät ole yhtä tärkeitä kuin niiden todellinen sisältö, jonka niiden sivu on tarkoitettu toimitettavaksi, joten siirrämme kuvakkeet sen sijaan sivun alaosaan lykkäämällä niiden lataamista kuten usein teemme JavaScriptin kanssa. Yritämme tätä videossa, mutta sillä on ongelmia Safarin renderöimällä kuvakkeet, joita yritimme myöhemmin ollenkaan. Ollakseni rehellinen, olen nähnyt epäjohdonmukaista käyttäytymistä tai erityyppisiä muissakin selaimissa tekemässä sitä tällä tavalla, ja näyttää siltä, että maisema muuttuu hieman tältä osin. Joten olen kuullut: on vaikea toteuttaa. Turvallisin laittaa lohko yläosaan, jos päädyt säilyttämään oikeat asiakirjat.
Tässä videossa tarkastelemme kaiken tämän perustestausta ja sitten joitain todellisia verkkosivustoja, jotka käyttävät tätä järjestelmää ja miten / mihin ne lisäävät svg-defs-lohkon.
Katso Chris Coyierin (@chriscoyier) kynä 954e71cb5d5e79fb61d3c89bb3f21b8a CodePenistä.
Huomautus
Pidän termistä "SVG defs block" - vain jotta voimme kutsua sitä nimellä, jolla on tietty tarkoitus, mutta jolla ei todellakaan ole virallista nimeä. Mutta sinun ei aina tarvitse käyttää tunnistetta. Kun käytät s: tä, ne eivät renderöi yksinään, enkä usko, että heidän pitäisi olla sisällä . Olen kuullut, että SVG: n gradienttien määritelmät ovat samat, eivätkä ne edes toimi, jos ne ovat . Riippumatta, se on edelleen "SVG-koodilohko, jonka määrittelemme myöhemmin käytettäväksi", joten kutsun sitä todennäköisesti "SVG-defs-lohkoksi".