HTML i SVG slike

[Mare13]

Pozdrav,

dakle imam problem sa prikazom slika na sajtovima.

Radim u wordpressu, i nebitno da li ubacujem SVG sliku u neki image frame ili custom html kod u wordpressu, browser mi ne prikazuje slike sa tom exentzijom.

Bude slika u kodu, ali se ne vidi dok joj ne dam visinu i to samo u pikselima radi.

E sad, kolege na isti nacin exportuju svg kao i ja i njihove slike rade bez problema i bez zadavanja visine, ne moram ni sirinu da stavim, i to na istom sajtu. Znaci, exportujemo istu sliku iz Illustrator fajla, oni mi je posalju, ja je ubacim i radi, a ja na isti nacin exportujem i slike nema dokle god joj ne zadam visinu, a visina u pixelima mi predstavlja problem kod responsivnosti. Da li je neko slucajno imao ovakav problem?

Ovo su postavke kad exportujem, isto kao i kolege koristim SVG Tiny 1.2

[Neutrino]

Kratak odgovor: SVG ti verovatno nema definisan viewBox atribut koji definiše proporciju vektorskog fajla pa browseri koriste svoje metode za proračun dimenzija (IE je posebno "specijalan" po tom pitanju).

Dugačak odgovor: detaljno objašnjenje zašto i kako možeš da pročitaš ovde - https://css-tricks.com/scale-svg/

Takođe sam primetio da koristiš "Save As" umesto "Export" opcije. Ukoliko koristiš CC 2015 pređi na "Export" opciju jer generiše fajlove koji su optimizovani i prilagođeni za web.

Ako i dalje imaš problema postavi kod SVG-a i gde ga koristiš pa da vidimo šta se dešava.

[Mare13]

Hvala ti na odgovoru,

Nisam siguran da smem da kacim link sajta pa evo ti ovako, ovo je inspect slike koja radi bez problema. Znaci poslali su mi, ja sam ubacio u image frame wp teme koju koristimo i to je to, sve u redu ( ta narandzasta slika iznad )



Onda ja exportujem SVG isto tako je ubacim, ima je u kodu ali se ne prikazuje. Sto se tice Save As, tako i oni rade, a ja u "Export" nemam da biram SVG kad treba da sacuvam. Koristim bas CC 2015

Otvorio sam njihov SVG i moj u Sublime-u evo pocetak koda, verujem da je samo to bitno

Njihova koja radi:




Moja koja ne radi:



EDIT: Sad tek vidim u njihovom kodu da slika ima sirinu i visinu, a kako moja nema, nemam pojma. Bice da je u tome problem

[Neutrino]

SVG je vektorski format što znači da čak i sa definisanim viewBoxom, koji diktira proporciju, moraš da navedeš bar jednu dimenziju u HTML/CSS kodu da bi SVG bio ispravno prikazan.

Navedi makar širinu SVG-a i browseri će sami proračunati visinu.

[Mare13]

Da, jasno mi je to postalo nakon sto sam za svaku sliku morao da stavljam visinu

Jedino eto to sto me buni kako kad oni exportuju, u njihovom SVG-u odmah ima definisana visina i sirina a kod mene ne. Al' dobro necu vise da te davim, hvala na objasnjenjima

[Neutrino]

Ako te interesuje da naučiš sve što ima da se nauči o SVG-u preporučujem odličnu seriju Chris Coyiera - https://css-tricks.com/lodge/svg/

Isto tako Sara Soueidan ima nekoliko jako dobrih članaka na tu temu - https://sarasoueidan.com/tags/svg/

Oboje su dokazane legende web designa (Chris Coyier je i vlasnik codepen.io).

[Mare13]

E odlicno, procitacu ovo. Hvala jos jednom

[Mare13]

Nasao sam u cemu je problem. Ne sme da bude otkaceno "Responsive" u save options kad se cuva SVG

[Neutrino]

Ako "Responsive" opcija nije čekirana SVG će koristi apsolutne jedinice za sve elemente. Pogledaj <rect> elemente u svom kodu. Videćeš da sve imaju width i height atribute. Ako imaš nameru da ti se SVG razvlači "responsive" opcija je obavezna.

I kao što već rekoh, pošto koristiš CC 2015 verziju (19.0) pređi na "Export" opciju. Mnogo je bolja od "Save As" za web design.

[Mare13]

Sve jasno i logicno sto hoces da kazes, ali.. Cak i kad su apsolutne jedinice za SVG sliku u ovoj nasoj temi na WP-u slika je responsivna. Tj. valjda je taj img frame u kom je slika responsivan pa se zbog toga i slika smanjuje, tako da nemam nikakvih problema sa tim sto sam iskljucio to "responsive"

Druga mogucnost je to sto ova tema svakoj slici dodaje neku "responsiv" klasu pa mozda ima neka skripta koja u temi resizuje sama slike.

A ovo za Export, vec sam ti napisao, ja nemam opciju za SVG kad hocu export

[Neutrino]

Mare13 kaže:

A ovo za Export, vec sam ti napisao, ja nemam opciju za SVG kad hocu export

Uradi update na najsvežiju verziju CC-a.