Keegi küsis minult hiljuti, kuidas ma lähenen tekstisiseste SVG-de silumisele. Kuna see on osa DOM-ist, saame kontrollida mis tahes sisest SVG-d mis tahes brauseri DevToolsis. Ja tänu sellele on meil võimalus asju välja mõelda ja avastada võimalikke probleeme või võimalusi SVG optimeerimiseks.
Kuid mõnikord ei näe me oma SVG-sid üldse. Sellistel juhtudel on silumisel kuus konkreetset asja, mida otsin.
viewBox
väärtused
1. . viewBox
on SVG-ga töötamisel tavaline segaduskoht. Tehniliselt on hea kasutada reasisese SVG-d ilma selleta, kuid kaotaksime selle ühe olulisema eelise: konteineriga skaleerimise. Samal ajal võib see valesti konfigureerimisel meile vastu töötada, mille tulemuseks on soovimatu kärpimine.
Elemendid on olemas, kui neid kärbitakse – nad on lihtsalt koordinaatsüsteemi osas, mida me ei näe. Kui avaksime faili mõnes graafikatöötlusprogrammis, võib see välja näha järgmine:
Lihtsaim viis selle parandamiseks? Lisama overflow="visible"
SVG-sse, olenemata sellest, kas see on meie stiililehel, tekstisiseselt style
atribuut või otse SVG esitlusatribuutina. Aga kui rakendame ka a background-color
SVG-le või kui selle ümber on muid elemente, võivad asjad veidi viltu jääda. Sel juhul on parim valik redigeerida viewBox
et näidata seda koordinaadisüsteemi osa, mis oli peidetud:
Selle kohta on veel mõned asjad viewBox
mida tasub teema juures käsitledes käsitleda:
viewBox
tööd?
Kuidas see SVG on lõpmatu lõuend, kuid me saame kontrollida, mida ja kuidas me seda näeme läbi vaateava ja viewBox
.
. vaateava on aknaraam lõpmatul lõuendil. Selle mõõtmed on määratletud width
ja height
atribuudid või CSS-is vastavaga width
ja height
omadused. Saame määrata mis tahes soovitud pikkuseühiku, kuid kui esitame ühikuta arvud, on need vaikimisi pikslid.
. viewBox
on määratletud nelja väärtusega. Esimesed kaks on alguspunktiks vasakus ülanurgas (x
ja y
väärtused, lubatud negatiivsed arvud). Redigeerin neid pildi ümberraamistamiseks. Viimased kaks on vaateaknas oleva koordinaadisüsteemi laius ja kõrgus – siin saame redigeerida ruudustiku skaalat (mida käsitleme jaotises Suumimine).
Siin on lihtsustatud märgistus, mis näitab SVG-d viewBox
ja width
ja height
atribuudid on mõlemad määratud <svg>
:
<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>
Ümberkujundamine
Niisiis, see:
<svg viewBox="0 0 700 700">
…kaardid sellele:
<svg viewBox="start-x-axis start-y-axis width height">
Vaateava, mida näeme, algab kust 0
x-teljel ja 0
y-teljel kohtuvad.
Seda muutes:
<svg viewBox="0 0 700 700">
…sellele:
<svg viewBox="300 200 700 700">
…laius ja kõrgus jäävad samaks (700
ühikut), kuid koordinaatsüsteemi algus on nüüd 300
punkt x-teljel ja 200
y-teljel.
Järgmises videos lisan punase <circle>
SVG-sse, mille keskpunkt on 300
punkt x-teljel ja 200
y-teljel. Pange tähele, kuidas muuta viewBox
samadele väärtustele vastavad koordinaadid muudavad ka ringi paigutust kaadri vasakusse ülanurka, samas kui SVG renderdatud suurus jääb samaks (700
×700
). Kõik, mida ma tegin, oli asjade ümber kujundamine viewBox
.
Suumimine
Kahte viimast väärtust saame muuta sees viewBox
pilti sisse või välja suumimiseks. Mida suuremad on väärtused, seda rohkem SVG ühikuid lisatakse, et need mahuks vaateaknasse, mille tulemuseks on väiksem pilt. Kui tahame hoida suhet 1:1, siis meie viewBox
laius ja kõrgus peavad vastama meie vaateava laiuse ja kõrguse väärtustele.
Vaatame, mis juhtub Illustratoris, kui me neid parameetreid muudame. Kunstitahvel on viewport
mida tähistab valge 700 piksli suurune ruut. Kõik muu väljaspool seda piirkonda on meie lõpmatu SVG-lõuend ja vaikimisi kärbitakse.
Alloleval joonisel 1 on näidatud sinine täpp juures 900
piki x-telge ja 900
piki y-telge. Kui ma muudan kahte viimast viewBox
väärtused alates 700
et 900
nagu nii:
<svg viewBox="300 200 900 900" width="700" height="700">
…siis on sinine täpp peaaegu täielikult tagasi vaates, nagu on näha alloleval joonisel 2. Meie pilti vähendatakse, kuna suurendasime viewBox väärtusi, kuid SVG tegelikud laiuse ja kõrguse mõõtmed jäid samaks ning sinine täpp läks tagasi kärbimata alale lähemale.
Roosa ruut näitab, kuidas ruudustik sobitub vaateavaga: seade muutub väiksemaks ja samale vaateava alale mahub rohkem ruudustiku jooni. Saate mängida samade väärtustega järgmises pliiatsis, et näha, kuidas see toimib:
width
ja height
2. puudu Teine levinud asi, mida ma reasisese SVG silumisel vaatan, on see, kas märgistus sisaldab width
or height
atribuudid. See pole paljudel juhtudel suur probleem, kui SVG pole absoluutse positsioneerimisega konteineris või paindlikus konteineris (nagu Safari arvutab SVG width
väärtus koos 0px
asemel auto
). Välja arvatud width
or height
sellistel juhtudel ei lase meil näha kogu pilti, nagu me näeme selle CodePeni demo avamine ja selle võrdlemine Chrome'is, Safaris ja Firefoxis (suuremaks vaatamiseks puudutage pilte).
Lahendus? Lisage laius või kõrgus, kas esitluse atribuudina, stiiliatribuudi sees või CSS-is. Vältige kõrguse kasutamist eraldi, eriti kui see on seatud 100%
or auto
. Teine lahendus on seadke paremale ja vasakpoolsed väärtused.
Saate ringi mängida järgmine pliiats ja kombineerida erinevaid võimalusi.
fill
ja stroke
värvid
3. Tahtmatu Samuti võib juhtuda, et rakendame värvi <svg>
kas see on tekstisisene stiil või pärineb CSS-ist. See on hea, kuid märgistuses võib esineda muid värviväärtusi või stiile, mis on vastuolus seadme värviga <svg>
, muutes osad nähtamatuks.
Sellepärast kipun otsima fill
ja stroke
atribuudid SVG märgistuses ja pühkige need välja. Järgmine video näitab SVG-d, mille kujundasin CSS-is punasega fill
. On paar juhtumit, kus SVG osad täidetakse valgega otse märgistuses, mille eemaldasin puuduvate osade paljastamiseks.
4. Puuduvad ID-d
See võib tunduda ülimalt ilmne, kuid te oleksite üllatunud, kui sageli ma näen seda esile kerkivat. Oletame, et tegime Illustratoris SVG-faili ja panime väga usinalt oma kihtidele nimesid, et saaksite faili eksportimisel märgistuses kenasti sobivad ID-d. Ja oletame, et plaanime selle SVG-d CSS-is kujundada, ühendades need ID-dega.
See on tore viis asju ajada. Kuid on palju kordi, kus olen näinud sama SVG-faili eksportimist teist korda samasse asukohta ja ID-d on erinevad, tavaliselt otse vektorite kopeerimisel/kleepimisel. Võib-olla lisati uus kiht või nimetati mõni olemasolevatest ümber või midagi. Igal juhul ei ühti CSS-i reeglid enam SVG märgistuse ID-dega, mistõttu SVG renderdub oodatust erinevalt.
Suurtes SVG-failides võib meil olla raske neid ID-sid leida. See on õige aeg DevToolsi avamiseks, graafika selle osa kontrollimiseks, mis ei tööta, ja kontrollida, kas need ID-d ikka kattuvad.
Seega, ma ütleksin, et enne asjade vahetamist tasub avada eksporditud SVG-fail koodiredaktoris ja võrrelda seda originaaliga. Sellised rakendused nagu Illustrator, Figma ja Sketch on nutikad, kuid see ei tähenda, et me ei vastuta nende kontrollimise eest.
5. Lõikamise ja maskeerimise kontrollnimekiri
Kui SVG ootamatult kärbitakse ja viewBox
kontrollib hästi, ma tavaliselt vaatan CSS-i clip-path
or mask
omadused, mis võivad pilti segada. On ahvatlev jätkata tekstisisese märgistuse vaatamist, kuid on hea meeles pidada, et SVG stiil võib juhtuda mujal.
CSS-i lõikamine ja maskeerimine võimaldab meil pildi või elemendi osi "peita". SVG-s <clipPath>
on vektoroperatsioon, mis lõikab kujutise osi pooliku tulemuseta. The <mask>
silt on pikslioperatsioon, mis võimaldab läbipaistvust, poolläbipaistvuse efekte ja uduseid servi.
See on väike kontrollnimekiri silumisjuhtumite jaoks, kus on tegemist kärpimise ja maskeerimisega:
- Veenduge, et lõiketee (või mask) ja graafika kattuvad üksteisega. Kuvatakse kattuvad osad.
- Kui teil on keeruline tee, mis ei ristu teie graafikaga, proovige rakendada teisendusi, kuni need ühtivad.
- Saate sisemist koodi siiski DevToolsiga kontrollida, kuigi
<clipPath>
or<mask>
ei ole renderdatud, seega kasutage seda! - Kopeerige sees olev märgistus
<clipPath>
ja<mask>
ja kleepige see enne sulgemist</svg>
tag. Seejärel lisage afill
nendele kujunditele ja kontrollige SVG koordinaate ja mõõtmeid. Kui te ikka pilti ei näe, proovige lisadaoverflow="hidden"
Euroopa<svg>
tag. - Kontrollige, et a ainulaadne ID-d kasutatakse
<clipPath>
or<mask>
ja sama ID-d rakendatakse kärbitud või maskeeritud kujunditele või kujundite rühmale. Sobimatu ID rikub välimuse. - Kontrollige, kas märgistuse vahel pole kirjavigu
<clipPath>
or<mask>
sildid. fill
,stroke
,opacity
või mõni muu sees olevatele elementidele rakendatud stiil<clipPath>
on kasutud - ainus kasulik osa on nende elementide täitepiirkonna geomeetria. Sellepärast, kui kasutate a<polyline>
see käitub nagu a<polygon>
ja kui kasutate a<line>
te ei näe lõikamise efekti.- Kui te ei näe oma pilti pärast a
<mask>
, veenduge, etfill
varjavast sisust ei ole täiesti must. Maskeeriva elemendi heledus määrab lõpliku graafika läbipaistmatuse. Näete läbi heledamad osad ja tumedamad osad peidavad teie pildi sisu.
Saate mängida maskeeritud ja kärbitud elementidega see pliiats.
6. Nimeruumid
Kas teadsite, et SVG on XML-põhine märgistuskeel? No on küll! SVG nimeruum on määratud xmlns
atribuut:
<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>
XML-i nimevahede kohta on palju teada ja MDN-il on suurepärane aabits. Piisab, kui öelda, et nimeruum annab brauserile konteksti, teavitades seda, et märgistus on SVG-le omane. Idee seisneb selles, et nimeruumid aitavad vältida konflikte, kui ühes failis on mitut tüüpi XML-i (nt SVG ja XHTML). See on tänapäevastes brauserites palju harvem probleem, kuid võib aidata selgitada SVG-renderdusprobleeme vanemates brauserites või brauserites (nt Gecko), mis on doktüüpide ja nimeruumide määratlemisel ranged.
SVG 2 spetsifikatsioon ei nõua nimevahesid HTML-i süntaksi kasutamisel. Aga see on ülioluline kui pärandbrauserite tugi on prioriteet – lisaks ei tee selle lisamine midagi halba. Sel viisil, kui <html>
elemendi omad xmlns
atribuut on määratletud, ei ole see neil harvadel juhtudel vastuolus.
<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>
See kehtib ka CSS-is tekstisisese SVG kasutamisel, näiteks taustapildiks määramisel. Järgmises näites kuvatakse pärast edukat kinnitamist sisendile linnukese ikoon. CSS näeb välja selline:
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;
}
Kui eemaldame taustaomaduses SVG-s oleva nimeruumi, kaob pilt:
Teine levinud nimeruumi eesliide on xlink:href
. Kasutame seda sageli SVG muudele osadele viitamisel, näiteks mustrid, filtrid, animatsioonid või gradiendid. Soovitatav on alustada selle asendamist href
kuna teine on alates SVG 2-st aegunud, kuid vanemate brauserite puhul võib esineda ühilduvusprobleeme. Sel juhul saame kasutada mõlemat. Ärge unustage lisada nimeruumi xmlns:xlink="http://www.w3.org/1999/xlink"
kui te veel kasutate xlink:href
.
Täiustage oma SVG-oskusi!
Loodan, et need näpunäited aitavad teil palju aega säästa, kui leiate end valesti renderdatud tekstisiseste SVG-de tõrkeotsingust. Need on just need asjad, mida ma otsin. Võib-olla on teil erinevaid punaseid lippe, mida jälgite - kui jah, siis rääkige mulle kommentaarides!
Põhimõte on see, et tasub omada vähemalt põhiteadmisi SVG-d saab kasutada erinevatel viisidel. CodePeni väljakutsed sisaldavad sageli SVG-d ja pakuvad häid tavasid. Siin on veel mõned ressursid taseme tõstmiseks:
Soovitan SVG-ga seotud headuse huvides jälgida mõnda inimest:
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
- Allikas: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/
- 1
- 1: 1 suhe
- 11
- 7
- 9
- 98
- a
- võime
- Võimalik
- MEIST
- absoluutne
- tegevus
- lisatud
- Täiendavad lisad
- pärast
- vastu
- Materjal: BPA ja flataatide vaba plastik
- võimaldab
- Olgu
- ja
- animatsioone
- Teine
- rakendatud
- kehtima
- Rakendades
- lähenemine
- apps
- PIIRKOND
- ümber
- Kunst
- kunstiteoseid
- atribuudid
- tagasi
- tagapõhi
- põhiline
- sest
- enne
- on
- alla
- Kasu
- BEST
- vahel
- Suur
- Natuke
- Must
- sinine
- põhi
- Murdma
- heledam
- brauseri
- brauserid
- lõuend
- juhul
- juhtudel
- CAT
- põhjustades
- keskus
- muutma
- Vaidluste lahendamine
- muutuv
- kontrollima
- Linnuke
- Kontroll
- Kroom
- Ring
- lähemale
- Sulgemine
- kood
- värv
- ühendama
- Tulema
- tulevad
- ühine
- võrrelda
- ühilduvus
- keeruline
- konflikt
- segadus
- Konteiner
- sisaldab
- sisu
- kontekst
- kontrollida
- koordineerima
- Nurk
- Vastav
- võiks
- Paar
- kattes
- CSS
- kärped
- andmed
- tegelema
- vaikimisi
- määratlemisel
- määrab
- DID
- erinev
- raske
- mõõdud
- otse
- Ei tee
- DOM
- Ära
- DOT
- alla
- joonistus
- iga
- lihtsaim
- toimetaja
- mõju
- mõju
- elemendid
- mujal
- täielikult
- jms
- Isegi
- kõik
- tõend
- näide
- välja arvatud
- olemasolevate
- ootama
- Selgitama
- ei
- vähe
- figma
- Joonis
- fail
- Faile
- täidetud
- Filtrid
- lõplik
- leidma
- lõpp
- Firefox
- esimene
- sobima
- Määrama
- lipud
- paindlik
- Järel
- FRAME
- Alates
- täis
- täielikult
- saama
- hea
- kalded
- GRAAFIKA
- graafika
- suur
- võre
- Grupp
- juhtub
- kõrgus
- aitama
- siin
- varjatud
- varjama
- lootus
- Kuidas
- Kuidas
- HTML
- HTTPS
- Viga saanud
- ICON
- idee
- pilt
- pildid
- in
- sisaldama
- lisada
- kasvanud
- Lõpmatu
- sisend
- selle asemel
- segab
- seotud
- probleem
- küsimustes
- IT
- ise
- hoidma
- Teadma
- keel
- suur
- suurem
- viimane
- kiht
- kihid
- Pärand
- Pikkus
- Tase
- joon
- liinid
- vähe
- liising
- enam
- Vaata
- näeb välja
- otsin
- välimus
- kaotama
- Partii
- tehtud
- tegema
- palju
- mask
- Vastama
- sobitamine
- mdn
- Vastama
- võib
- puuduvad
- Kaasaegne
- rohkem
- kõige
- Mozilla
- nimetamine
- negatiivne
- Uus
- numbrid
- Ilmne
- pakkuma
- ONE
- avatud
- avatud
- avamine
- töö
- Võimalused
- optimeerima
- valik
- Valikud
- originaal
- Muu
- väljaspool
- parameetrid
- osa
- eriti
- osad
- tee
- mustrid
- riik
- Inimesed
- tükki
- piksel
- kava
- Platon
- Platoni andmete intelligentsus
- PlatoData
- mängima
- rohke
- pluss
- Punkt
- positsioneerimine
- potentsiaal
- tava
- esitlus
- vältida
- prioriteet
- Programm
- omadused
- kinnisvara
- anda
- annab
- HARULDANE
- suhe
- hiljuti
- Soovitus
- Red
- Punased lipud
- jääma
- jäi
- jäänused
- meeles pidama
- kõrvaldama
- Eemaldatud
- rendering
- esindatud
- nõudma
- Vahendid
- vastutav
- tulemuseks
- Tulemused
- avalduma
- eeskirjade
- safari
- sama
- Säästa
- Skaala
- Kaalud
- ketendamine
- ulatus
- Teine
- Osa
- nägemine
- komplekt
- kehtestamine
- kuju
- näitama
- Näitused
- märkimisväärne
- lihtsustatud
- alates
- SIX
- SUURUS
- väike
- väiksem
- nutikas
- So
- lahendus
- mõned
- midagi
- konkreetse
- täpsustus
- ruut
- algus
- Käivitus
- algab
- Veel
- Range
- stiil
- edukas
- super
- toetama
- üllatunud
- SVG
- süntaks
- süsteem
- TAG
- Puuduta
- .
- asi
- asjad
- Läbi
- läbi kogu
- aeg
- korda
- nõuanded
- et
- tonn
- teema
- läbipaistvus
- tõsi
- paljastama
- mõistmine
- üksus
- üksused
- soovimatu
- us
- kasutama
- tavaliselt
- kinnitamine
- väärtus
- Väärtused
- eri
- Video
- vaade
- nähtav
- W3
- Watch
- kuidas
- M
- kas
- mis
- kuigi
- valge
- will
- ilma
- Töö
- töö
- väärt
- oleks
- XML
- sa
- Sinu
- ise
- sephyrnet
- zoom
- suumimine