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).