Svg
- 1. SVG
- 2. SVG este un limbaj de marcare bazat pe XML i, ca orice alt limbaj de programare, poate fi scris i editat 樽ntr-un editor de text. Deci, teoretic, spre deosebire de fiierele JPG sau PNG, nu avem nevoie de niciun software GUI pentru a crea SVG. Cu toate acestea, 樽n marea majoritate a cazurilor, este inevitabil utilizarea aplicaiilor de proiectare grafic.
- 3. Lucrul cu forme i grafic complicate 樽ntr-un format bazat pe text este complet posibil, dar de obicei ar fi foarte complicat i obositor. Prin urmare, este o practic obinuit s utilizeze aplicaii precum Adobe Illustrator, Sketch sau Figma pentru a proiecta grafic grafic, apoi s le exporte 樽ntr-un format SVG.
- 4. Beneficiile SVG Scalare: spre deosebire de graficele raster, SVG nu pierde calitatea la scalare, de aceea este convenabil s o foloseti pentru dezvoltare sub retin. Reducerea cererilor HTTP: atunci c但nd utilizai SVG, numrul de apeluri ctre server este redus, iar viteza de 樽ncrcare a site-ului este 樽n mod corespunztor crescut. Styling i script: utiliz但nd CSS putei modifica setrile grafice de pe site, cum ar fi fundal, transparen sau chenare. Animare i editare: folosind javascript, putei anima SVG-uri i le putei edita 樽ntr-un editor de text sau grafic (InkScape sau Adobe Illustrator). Dimensiune mic: obiectele SVG c但ntresc mult mai puin dec但t mapele de bii.
- 5. Basic Shapes ELLIPSES AND CIRCLES <ellipse cx="400" cy="300" rx="250" ry="150"/>
- 6. RECTANGLES AND ROUNDED RECTANGLES <rect x="150" y="100" width="500" height="400" rx="30"/>
- 7. LINES <line x1="100" y1="100" x2="200" y2="200"/>
- 8. POLYLINES <polyline points="10,20 10,20 30,10 40,20" />
- 9. SVG path element Acesta este cel mai versatil i mai flexibil element SVG pentru desenarea liniilor drepte, curbate i ondulate, precum i pentru contururi complexe deschise i 樽nchise. Elementul traseu are atributul d, 樽n interiorul cruia exist un pachet de comenzi care definesc traiectoria i direcia liniei cretate.
- 10. <path d="M 10 210 L 110 10 L 210 210 z" fill="#9DE281" stroke-width="3" stroke="#FDD000" />
- 11. M - mutai indicatorul 樽ntr-un punct cu coordonate absolute (x, y) L - deseneaz o linie de la punctul curent la cea specificat cu coordonate absolute (x, y) H - deseneaz o linie orizontal din punctul curent p但n la coordonata absolut specificat (x) V - desenai o linie vertical din punctul curent p但n la coordonata absolut specificat (y)
- 12. <path d="M50,200 Q175,75 300,200 Q425,75 550,200 style="stroke:blue; stroke-width:4; fill:none;"/>
- 13. Reziultat analog prin diferite metode
- 14. width, height And viewBox viewBox nu determin dimensiunea SVG. Acesta specific doar coordonatele zonei 樽n care este desenat SVG-ul nostru. Prin urmare, atunci c但nd este utilizat pe web, <svg> cu un viewBox specificat va lua 樽ntotdeauna tot spaiul disponibil i va pstra raportul stabilit de viewBox - dac nu prevenim acest lucru cu CSS sau setm atributele de lime i / sau 樽nlime.
- 15. <svg viewBox="0 0 12 8"> </svg>
- 16. Groups Grupurile reprezint mijlocul de baz pentru organizarea straturilor 樽n instrumentele de proiectare. n afar de setarea ierarhiei, grupurile sunt utilizate pentru a aplica operaiuni 樽n vrac, cum ar fi transformrile, la mai multe elemente. Nu exist nici o diferen semnificativ 樽n modul 樽n care grupurile funcioneaz 樽n Illustrator, Sketch i Figma i, din fericire, funcionalitatea de baz a grupurilor SVG (<g> ... </g>) este aproape aceeai.
- 17. Transforms translate: deplaseaz elementul de-a lungul axei verticale i / sau orizontale; scale: scaleaz elementul de-a lungul axei verticale i / sau orizontale rotate: creeaz o rotaie bidimensional printr-un unghi dat specificat 樽n grade 樽n jurul unui punct dat; skew (skewX or skewY): fr但neaz elementul cu un unghi dat specificat 樽n grade de-a lungul axei verticale sau orizontale; matrix: cea mai complex i versatil dintre funciile de transformare disponibile.
- 19. GRADIENT
- 21. Filters
- 23. Text
- 24. BOOLEAN OPERATIONS Operaiile booleane sunt funcii efectuate pe forme pentru a le combina 樽n c但teva moduri diferite. n Illustrator, Sketch i Figma, exist 4 operaii booleane standard Union (Unite) Subtract (Minus front) Intersect Difference (Exclude)
- 25. 仗仂仍亰亠仄 SVG 仆舒 舒亶亠
- 26. Icon Font + pictograma se comport ca un simbol de font i toi parametrii sunt de asemenea configurai prin CSS (dimensiune, culoare, aliniere, etc.); + Singura modalitate de lucru 樽n IE 8 fr manipulri suplimentare; - toate elementele fiierului SVG sunt combinate 樽ntr-un singur caracter, astfel 樽nc但t s 樽l putei controla folosind CSS sau JS numai ca un 樽ntreg; - sunt acceptate doar pictograme cu o singur culoare; - dac descrcarea fontului eueaz, utilizatorul fie nu va vedea deloc icoanele, fie, dac codurile pictogramelor coincid cu caracterele Unicode, vor fi afiate caracterele corespunztoare. http://fontello.com https://icomoon.io/app
- 27. SVG ca OBIECT <object type="image/svg+xml" data=your.svg" id=object class=icon></object> Obiectul 樽ncorporeaz elementul atributului de date ca iframe, adug但nd marcajul fiierului inclus 樽n interior, astfel 樽nc但t elementele pot fi accesate folosind JS
- 28. + putei utiliza un fiier CSS extern pentru a controla stilurile; + Animaiile i filtrele SVG sunt acceptate; + animaii interactive suportate; - Pentru IE 8 i versiuni ulterioare, este necesar o 樽nlocuire a unei imagini pe harta de bii.
- 29. SVG la IMG sau imagine de fundal <img src=/DmitriiStoian/svg-192680599//DmitriiStoian/svg-192680599/"icon.svg"> <div class="icon"></div> .icon { background-image: url(/DmitriiStoian/svg-192680599/"icon.svg"); width: 90px; height: 150px; }
- 30. + Animaiile i filtrele SVG sunt acceptate; + 樽n cazul imaginii de fundal, putei utiliza sprituri SVG; - Nu putei modifica proprietile elementelor SVG prin CSS sau JS; - animaiile interactive nu sunt acceptate; - Pentru IE 8 i versiuni ulterioare, este necesar o 樽nlocuire a unei imagini pe harta de bii.
- 31. Inline SVG <svg><use x="0" y="0" xlink:href="#some_svg_element_id" transform="scale(0.5)" /></svg>
- 32. + fr 樽ncrcare de fiiere externe; + manipularea disponibil a elementelor SVG prin CSS i JS; + Animaiile i filtrele SVG sunt acceptate; + animaii interactive suportate; + capacitatea de reutilizare a elementelor; - codul paginii este murdar; - Pentru IE 8 i versiuni ulterioare, este necesar marcarea suplimentar i 樽nlocuirea cu o imagine de hart de bii.
- 33. Animaie SVG Animaie CSS Animaia SMIL 樽ncorporat 樽n SVG CSS - are suport mai bun pentru browser; SMIL - are o funcionalitate excelent.
- 34. Animaie CSS <svg> <style> @keyframes reduce_radius { from { r: 10; } to { r: 3; } } @keyframes change_fill { 0% { fill: #49549E; } 75% { fill: #1bceb1; } 100% { fill: #1bce4f; } } .circle { animation: change_fill 1s, popup 2s; } </style> </svg>
- 35. C樽nd SMIL Ce nu a putut face CSS (animai un atribut neacceptat etc.) Deinei un control mai precis asupra animaiei. Efectuarea morphing-ului (animarea atributului d la eticheta cii) Sincronizai animaiile Realizai animaii interactive
- 36. Principalele etichete pentru animaie sunt <animate>, <set>, <animateTransform>, <animateMotion>.
- 37. animate
- 38. set
- 39. animateTransform
- 40. animateMotion
- 41. Bibliografie 舒亟亳仄 仆舒亠于. 仆仂于 SVG 丼仂 舒从仂亠 SVG Sarah Drasner SVG Animations: From Common UX Implementations to Complex Responsive Animation 1st Edition, Kindle Edition Libby, Alex Beginning SVG, A Practical Introduction to SVG using Real-World Examples