Joku kysyi minulta äskettäin, kuinka suhtaudun sisäänrakennettujen SVG-tiedostojen virheenkorjaukseen. Koska se on osa DOM:ia, voimme tarkastaa minkä tahansa inline SVG:n missä tahansa selaimen DevToolsissa. Ja sen ansiosta meillä on mahdollisuus selvittää asioita ja paljastaa mahdolliset ongelmat tai mahdollisuudet optimoida SVG.
Mutta joskus emme edes näe SVG-tiedostojamme ollenkaan. Näissä tapauksissa on kuusi tiettyä asiaa, joita etsin, kun teen virheenkorjauksen.
viewBox
arvot
1. - viewBox
on yleinen hämmennyskohta SVG:n kanssa työskennellessä. On teknisesti hienoa käyttää inline SVG:tä ilman sitä, mutta menetämme yhden sen merkittävimmistä eduista: skaalauksen säilöllä. Samaan aikaan se voi toimia meitä vastaan, jos se on määritetty väärin, mikä johtaa ei-toivottuihin leikkauksiin.
Elementit ovat olemassa, kun ne leikataan - ne ovat vain koordinaattijärjestelmän osassa, jota emme näe. Jos avaamme tiedoston jossain grafiikan muokkausohjelmassa, se voisi näyttää tältä:
Helpoin tapa korjata tämä? Lisätä overflow="visible"
SVG:hen, olipa se sitten tyylisivullamme style
attribuutti tai suoraan SVG-esitysattribuutti. Mutta jos käytämme myös a background-color
SVG:hen tai jos sen ympärillä on muita elementtejä, asiat saattavat näyttää hieman huonolta. Tässä tapauksessa paras vaihtoehto on muokata viewBox
näyttääksesi sen osan koordinaattijärjestelmästä, joka oli piilotettu:
Siinä on muutama lisäasia viewBox
joita kannattaa käsitellä, kun olemme aiheesta:
viewBox
toimii?
Miten SVG on ääretön kangas, mutta voimme hallita mitä näemme ja miten näemme sen kuvaportin ja viewBox
.
- näkymä on ikkunakehys äärettömälle kankaalle. Sen mitat määritellään width
ja height
attribuutteja tai CSS:ssä vastaavan kanssa width
ja height
ominaisuuksia. Voimme määrittää minkä tahansa haluamamme pituusyksikön, mutta jos annamme yksiköttömiä lukuja, ne ovat oletuksena pikseleitä.
- viewBox
määritellään neljällä arvolla. Kaksi ensimmäistä ovat aloituspiste vasemmassa yläkulmassa (x
ja y
arvot, negatiiviset luvut sallittu). Muokkaan näitä muokatakseni kuvaa. Kaksi viimeistä ovat koordinaattijärjestelmän leveys ja korkeus katseluportin sisällä – tässä voimme muokata ruudukon mittakaavaa (joihin perehdymme osiossa zoomaus).
Tässä on yksinkertaistettu merkintä, joka näyttää SVG:n viewBox
ja width
ja height
attribuutit ovat molemmat asetettu <svg>
:
<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>
Uudelleen kehystys
Siis tämä:
<svg viewBox="0 0 700 700">
…kartat tähän:
<svg viewBox="start-x-axis start-y-axis width height">
Näkymä, jonka näemme, alkaa mistä 0
x-akselilla ja 0
y-akselilla kohtaavat.
Muuttamalla tätä:
<svg viewBox="0 0 700 700">
…tähän:
<svg viewBox="300 200 700 700">
…leveys ja korkeus pysyvät samoina (700
yksikköä), mutta koordinaattijärjestelmän alku on nyt kohdassa 300
piste x-akselilla ja 200
y-akselilla.
Seuraavaan videoon lisään punaisen <circle>
SVG:hen, jonka keskipiste on 300
piste x-akselilla ja 200
y-akselilla. Huomaa kuinka muutetaan viewBox
koordinaatit samoihin arvoihin muuttaa myös ympyrän paikan kehyksen vasempaan yläkulmaan, kun taas SVG:n renderöity koko pysyy samana (700
×700
). Tein vain "kehystäni" asioita uudelleen viewBox
.
zoomaus
Voimme muuttaa kahta viimeistä arvoa sisällä viewBox
lähentää tai loitontaa kuvaa. Mitä suuremmat arvot ovat, sitä enemmän SVG-yksiköitä lisätään näkymään mahtumaan, jolloin kuva on pienempi. Jos haluamme säilyttää 1:1-suhteen, meidän viewBox
leveyden ja korkeuden on vastattava näkymän leveys- ja korkeusarvoja.
Katsotaanpa, mitä tapahtuu Illustratorissa, kun muutamme näitä parametreja. Taidetaulu on viewport
jota edustaa valkoinen 700 pikseliä neliö. Kaikki muu tämän alueen ulkopuolella on ääretöntä SVG-pohjaamme, ja se leikataan oletuksena.
Alla olevassa kuvassa 1 on sininen piste 900
x-akselia pitkin ja 900
y-akselia pitkin. Jos vaihdan kaksi viimeistä viewBox
arvot alkaen 700
että 900
kuten tämä:
<svg viewBox="300 200 900 900" width="700" height="700">
…sininen piste on melkein kokonaan takaisin näkyvissä, kuten alla olevasta kuvasta 2 näkyy. Kuvaamme on pienennetty, koska lisäsimme viewBox-arvoja, mutta SVG:n todelliset leveys- ja korkeusmitat pysyivät ennallaan ja sininen piste palasi lähemmäs leikkaamatonta aluetta.
Vaaleanpunainen neliö osoittaa, kuinka ruudukko skaalautuu näkymään: yksikkö pienenee ja samalle näkymäalueelle mahtuu enemmän ruudukkoviivoja. Voit pelata samoilla arvoilla seuraavassa kynässä nähdäksesi sen toimivan:
width
ja height
2. puuttuu Toinen yleinen asia, jota tarkastelen inline SVG:n virheenkorjauksessa, on, sisältääkö merkinnät width
or height
attribuutteja. Tämä ei ole iso juttu monissa tapauksissa, ellei SVG ole säilön sisällä, jossa on absoluuttinen sijainti tai joustava kontti (kuten Safari laskee SVG:n width
arvo kanssa 0px
sijasta auto
). Lukuun ottamatta width
or height
näissä tapauksissa estää meitä näkemästä koko kuvaa, kuten voimme nähdä avaa tämä CodePen-demo ja vertaamalla sitä Chromessa, Safarissa ja Firefoxissa (napauta kuvia nähdäksesi suurempana).
Ratkaisu? Lisää leveys tai korkeus joko esitysattribuuttina, tyyli-attribuutissa tai CSS:ssä. Vältä korkeuden käyttöä sellaisenaan, varsinkin kun se on asetettu 100%
or auto
. Toinen ratkaisu on aseta oikea ja vasemmat arvot.
Sen kanssa voi leikkiä seuraava kynä ja yhdistele eri vaihtoehtoja.
fill
ja stroke
värit
3. Tahaton Voi myös olla, että käytämme värejä <svg>
-tunnisteen, olipa kyseessä upotettu tyyli tai peräisin CSS:stä. Se on hienoa, mutta merkinnöissä voi olla muita väriarvoja tai tyylejä, jotka ovat ristiriidassa väriasetuksen kanssa <svg>
, jolloin osat jäävät näkymättömiksi.
Siksi minulla on tapana etsiä fill
ja stroke
attribuutit SVG:n merkinnöistä ja pyyhi ne pois. Seuraava video näyttää SVG:n, jonka tyylisin CSS:ssä punaisella fill
. On pari tapausta, joissa SVG:n osat on täytetty valkoisella suoraan merkinnöissä, jotka poistin puuttuvien osien paljastamiseksi.
4. Puuttuvat tunnukset
Tämä saattaa tuntua erittäin ilmeiseltä, mutta yllätyt kuinka usein näen sen esiin tulevan. Oletetaan, että teimme SVG-tiedoston Illustratorissa ja olimme erittäin ahkerasti nimeämisessämme tasoillemme, jotta saat kauniit vastaavat tunnukset merkintöihin viedessäsi tiedostoa. Oletetaan, että aiomme muotoilla tuon SVG:n CSS:ssä liittämällä niihin tunnuksia.
Se on mukava tapa tehdä asioita. Mutta on monta kertaa, kun olen nähnyt saman SVG-tiedoston vietynä toisen kerran samaan paikkaan ja tunnukset ovat erilaisia, yleensä kun vektoreita kopioidaan/liitätään suoraan. Ehkä uusi kerros lisättiin tai jokin olemassa olevista nimettiin uudelleen tai jotain. Joka tapauksessa CSS-säännöt eivät enää vastaa SVG-merkinnöissä olevia tunnuksia, minkä vuoksi SVG hahmontuu eri tavalla kuin odotit.
Suurissa SVG-tiedostoissa näitä tunnuksia voi olla vaikea löytää. Tämä on hyvä aika avata DevTools, tarkastaa se osa grafiikkaa, joka ei toimi, ja tarkistaa, vastaavatko tunnukset edelleen.
Joten sanoisin, että kannattaa avata viety SVG-tiedosto koodieditorissa ja verrata sitä alkuperäiseen ennen asioiden vaihtamista. Sovellukset, kuten Illustrator, Figma ja Sketch, ovat älykkäitä, mutta se ei tarkoita, että emme ole vastuussa niiden tarkistamisesta.
5. Leikkaamisen ja peittämisen tarkistuslista
Jos SVG leikataan yllättäen ja viewBox
tarkistaa ok, katson yleensä CSS:stä clip-path
or mask
ominaisuuksia, jotka saattavat häiritä kuvaa. On houkuttelevaa tarkastella tekstin sisäisiä merkintöjä, mutta on hyvä muistaa, että SVG:n tyyli saattaa tapahtua muualla.
CSS-leikkaus ja maskaus antaa meille mahdollisuuden "piilottaa" kuvan tai elementin osia. SVG:ssä <clipPath>
on vektoritoiminto, joka leikkaa kuvan osia ilman puoliväliä. The <mask>
tag on pikselitoiminto, joka mahdollistaa läpinäkyvyyden, puoliläpinäkyvyystehosteet ja epäselvät reunat.
Tämä on pieni tarkistuslista virheenkorjaustapauksiin, joissa leikkaus ja maskaaminen ovat mukana:
- Varmista, että syväyspolku (tai maski) ja grafiikka menevät päällekkäin. Päällekkäiset osat näytetään.
- Jos sinulla on monimutkainen polku, joka ei leikkaa grafiikkaa, kokeile käyttää muunnoksia, kunnes ne täsmäävät.
- Voit silti tarkistaa sisäisen koodin DevToolsilla, vaikka
<clipPath>
or<mask>
ei renderöidä, joten käytä sitä! - Kopioi merkintä sisällä
<clipPath>
ja<mask>
ja liitä se ennen kuin suljet</svg>
tag. Lisää sitten afill
noihin muotoihin ja tarkista SVG:n koordinaatit ja mitat. Jos et vieläkään näe kuvaa, yritä lisätäoverflow="hidden"
että<svg>
tunnisteita. - Tarkista, että a unique ID:tä käytetään
<clipPath>
or<mask>
, ja että samaa tunnusta käytetään muodoissa tai muotoryhmissä, jotka on leikattu tai maskattu. Virheellinen henkilöllisyystodistus rikkoo ulkonäön. - Tarkista kirjoitusvirheet merkintöjen välillä
<clipPath>
or<mask>
tunnisteita. fill
,stroke
,opacity
tai joitain muita tyylejä, joita on käytetty sisällä oleviin elementteihin<clipPath>
ovat hyödyttömiä – ainoa hyödyllinen osa on näiden elementtien täyttöalueen geometria. Siksi jos käytät a<polyline>
se käyttäytyy kuten a<polygon>
ja jos käytät a<line>
et näe leikkaustehostetta.- Jos et näe kuvaasi hakemuksen jälkeen
<mask>
, varmista, ettäfill
peittävä sisältö ei ole täysin musta. Peiteelementin luminanssi määrää lopullisen grafiikan opasiteetin. Näet läpi kirkkaammat osat, ja tummemmat osat piilottavat kuvasi sisällön.
Voit pelata naamioiduilla ja leikatuilla elementeillä tämä kynä.
6. Nimiavaruudet
Tiesitkö, että SVG on XML-pohjainen merkintäkieli? No niin on! SVG:n nimiavaruus on asetettu xmlns
määrite:
<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>
XML:n nimivälistä tiedetään paljon, ja MDN:llä on siihen loistava aluke. Riittää, kun sanotaan, että nimiavaruus tarjoaa selaimelle kontekstin ja ilmoittaa sille, että merkintä on SVG-kohtainen. Ajatuksena on, että nimitilat auttavat estämään ristiriitoja, kun samassa tiedostossa on useampi kuin yksi XML-tyyppi, kuten SVG ja XHTML. Tämä on paljon harvinaisempi ongelma nykyaikaisissa selaimissa, mutta se voi auttaa selittämään SVG-renderöintiongelmia vanhemmissa selaimissa tai selaimissa, kuten Gecko, jotka ovat tiukkoja määriteltäessä dokumenttityyppejä ja nimiavaruuksia.
SVG 2 -spesifikaatio ei vaadi nimiväliä käytettäessä HTML-syntaksia. Mutta se on ratkaisevan tärkeää jos tuki vanhoille selaimille on etusijalla – ja sen lisääminen ei haittaa mitään. Tällä tavalla, kun <html>
elementin xmlns
määrite on määritetty, se ei ole ristiriidassa niissä harvoissa tapauksissa.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>
Tämä pätee myös käytettäessä upotettua SVG:tä CSS:ssä, kuten asettamalla sen taustakuvaksi. Seuraavassa esimerkissä syötteeseen ilmestyy valintamerkkikuvake onnistuneen validoinnin jälkeen. CSS näyttää tältä:
textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}
Kun poistamme nimiavaruuden taustaominaisuuden SVG:stä, kuva katoaa:
Toinen yleinen nimitilan etuliite on xlink:href
. Käytämme sitä paljon viitattaessa muihin SVG:n osiin, kuten kuvioihin, suodattimiin, animaatioihin tai liukuväreihin. Suositus on aloittaa sen korvaaminen href
koska toinen on vanhentunut SVG 2:n jälkeen, mutta vanhempien selaimien kanssa saattaa esiintyä yhteensopivuusongelmia. Siinä tapauksessa voimme käyttää molempia. Muista vain lisätä nimiavaruus xmlns:xlink="http://www.w3.org/1999/xlink"
jos käytät edelleen xlink:href
.
Nosta SVG-taitojasi!
Toivon, että nämä vinkit auttavat sinua säästämään paljon aikaa, jos huomaat vianetsintää väärin renderöityjä SVG-tiedostoja. Nämä ovat vain asioita, joita etsin. Ehkä sinulla on erilaisia punaisia lippuja, joita katsot - jos on, kerro minulle kommenteissa!
Tärkeintä on, että kannattaa hankkia ainakin perustiedot eri tapoja käyttää SVG:tä. CodePen-haasteet sisältävät usein SVG:n ja tarjoavat hyviä käytäntöjä. Tässä on muutama resurssi lisää tasolle:
Suosittelen seuraamaan muutamia henkilöitä SVG:hen liittyvän hyvyyden vuoksi:
- SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
- Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
- Lähde: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/
- 1
- 1: 1 suhde
- 11
- 7
- 9
- 98
- a
- kyky
- pystyy
- Meistä
- absoluuttinen
- Toiminta
- lisä-
- lisä-
- Jälkeen
- vastaan
- Kaikki
- mahdollistaa
- Hyvä on
- ja
- animaatiot
- Toinen
- sovellettu
- käyttää
- Hakeminen
- lähestymistapa
- sovellukset
- ALUE
- noin
- Art
- kuvamateriaali
- attribuutteja
- takaisin
- tausta
- perustiedot
- koska
- ennen
- ovat
- alle
- Hyödyt
- PARAS
- välillä
- Iso
- Bitti
- Musta
- sininen
- pohja
- Tauko
- kirkkaampi
- selain
- selaimet
- kangas
- tapaus
- tapauksissa
- KISSA
- aiheuttaen
- keskus
- muuttaa
- Muutokset
- muuttuviin
- tarkastaa
- Valintamerkki
- Tarkastukset
- kromi
- Ympyrä
- lähempänä
- sulkeminen
- koodi
- väri
- yhdistää
- Tulla
- tuleva
- Yhteinen
- vertaamalla
- yhteensopivuus
- monimutkainen
- konflikti
- sekaannus
- Kontti
- sisältää
- pitoisuus
- tausta
- ohjaus
- koordinoida
- Kulma
- vastaava
- voisi
- Pari
- päällyste
- CSS
- leikkaukset
- tiedot
- sopimus
- oletusarvo
- määrittelemällä
- määrittää
- DID
- eri
- vaikea
- mitat
- suoraan
- ei
- DOM
- Dont
- DOT
- alas
- piirustus
- kukin
- Helpoin
- toimittaja
- vaikutus
- vaikutukset
- elementtejä
- muualla
- täysin
- jne.
- Jopa
- kaikki
- näyttö
- esimerkki
- lukuun ottamatta
- olemassa
- odottaa
- Selittää
- epäonnistuu
- harvat
- Figma
- Kuva
- filee
- Asiakirjat
- täynnä
- suodattimet
- lopullinen
- Löytää
- loppu
- Firefox
- Etunimi
- sovittaa
- Korjata
- liput
- joustava
- jälkeen
- FRAME
- alkaen
- koko
- täysin
- saada
- hyvä
- kaltevuudet
- Graafinen
- grafiikka
- suuri
- ruudukko
- Ryhmä
- tapahtuu
- korkeus
- auttaa
- tätä
- kätketty
- Piilottaa
- toivoa
- Miten
- Miten
- HTML
- HTTPS
- Satuttaa
- ICON
- ajatus
- kuva
- kuvien
- in
- sisältää
- sisällyttää
- kasvoi
- Ääretön
- panos
- sen sijaan
- häiritä
- osallistuva
- kysymys
- kysymykset
- IT
- itse
- Pitää
- Tietää
- Kieli
- suuri
- suurempi
- Sukunimi
- kerros
- kerrokset
- Perintö
- Pituus
- Taso
- linja
- linjat
- vähän
- sijainti
- kauemmin
- katso
- näyttää joltakin
- näköinen
- ulkonäkö
- menettää
- Erä
- tehty
- tehdä
- monet
- naamio
- ottelu
- matching
- MDN
- Tavata
- ehkä
- puuttuva
- Moderni
- lisää
- eniten
- mozilla
- nimeäminen
- negatiivinen
- Uusi
- numerot
- Ilmeinen
- kampanja
- ONE
- avata
- avattu
- avaaminen
- toiminta
- Mahdollisuudet
- Optimoida
- Vaihtoehto
- Vaihtoehdot
- alkuperäinen
- Muut
- ulkopuolella
- parametrit
- osa
- erityisesti
- osat
- polku
- kuviot
- maa
- Ihmiset
- kappaletta
- pixel
- suunnitelma
- Platon
- Platonin tietotieto
- PlatonData
- Pelaa
- paljon
- plus
- Kohta
- paikannus
- mahdollinen
- harjoitusta.
- esitys
- estää
- prioriteetti
- Ohjelma
- ominaisuudet
- omaisuus
- toimittaa
- tarjoaa
- HARVINAINEN
- suhde
- äskettäin
- Suositus
- punainen
- Punaiset liput
- jäädä
- pysyi
- jäännökset
- muistaa
- poistaa
- poistettu
- mallinnus
- edustettuina
- edellyttää
- Esittelymateriaalit
- vastuullinen
- Saatu ja
- tulokset
- paljastaa
- säännöt
- safari
- sama
- Säästä
- Asteikko
- asteikot
- skaalaus
- laajuus
- Toinen
- Osa
- koska
- setti
- asetus
- muodot
- näyttää
- Näytä
- merkittävä
- yksinkertaistettu
- koska
- SIX
- Koko
- pieni
- pienempiä
- fiksu
- So
- ratkaisu
- jonkin verran
- jotain
- erityinen
- määrittely
- neliö
- Alkaa
- Aloita
- alkaa
- Yhä
- Tiukka
- tyyli
- onnistunut
- suuri
- tuki
- yllättynyt
- SVG
- syntaksi
- järjestelmä
- TAG
- Napauttaa
- -
- asia
- asiat
- Kautta
- kauttaaltaan
- aika
- kertaa
- vinkit
- että
- tonni
- aihe
- Läpinäkyvyys
- totta
- paljastaa
- ymmärtäminen
- yksikkö
- yksiköt
- toivottuja
- us
- käyttää
- yleensä
- validointi
- arvo
- arvot
- eri
- Video
- Näytä
- näkyvä
- W3
- Katso
- tavalla
- Mitä
- onko
- joka
- vaikka
- valkoinen
- tulee
- ilman
- Referenssit
- työskentely
- arvoinen
- olisi
- XML
- Voit
- Sinun
- itse
- zephyrnet
- zoomaus
- zoomaus