[CSS] grafika wektorowa w CSS

slomianowlosy · Post autor: **slomianowlosy** » 30 lip 2009, 01:03

Dzień dobry!
Chciałem zrobić styl CSS, w którym używałbym grafiki wektorowej, ale coś nie pykło.
Mianowicie: wpisuję sobie

body {background-image: url("grafiki/tlo.svg");}

, jednak po otwarciu strony w Firefoxie ni chu-chu nie widać tła (chyba że kliknąć prawym i "Pokaż obrazek tła"). Czytałem że opera w pełni potrafi obsłużyć wektorki, a firefox potrzebuje, żeby MIME był zmieniony na "application/xhtml+xml". Tylko nie do końca wiem o co z tym chodzi. Próbowałem tak:

<meta http-equiv="application/xhtml+xml" content="text/html; charset=iso-8859-2" />

ale też nie działa.
Z góry dzięki, wielcy informatykowie! ;]

Kokosek · Post autor: **Kokosek** » 30 lip 2009, 10:49

slomianowlosy · Post autor: **slomianowlosy** » 30 lip 2009, 13:49

Kokosek pisze:<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />

Może i o to chodziło z tym MIME, ale i tak nie działa

Kokosek · Post autor: **Kokosek** » 30 lip 2009, 17:48

możesz wrzucić pliki html i css to spróbuję coś wymyślić

slomianowlosy · Post autor: **slomianowlosy** » 30 lip 2009, 20:28

Kokosek pisze:możesz wrzucić pliki html i css to spróbuję coś wymyślić

Pliki są na razie prawie czyste, bo póki co nie robiłem nic konkretnego tylko pod kurs css sobie pisałem i zatrzymałem się właśnie na tym że mi tło nie działało.
Ale łap koda:
HTML

<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />
<title>x</title>
<link rel="stylesheet" type="text/css" href="ceeses.css" />
</head>
<body>
<h1>blabla</h1>
</body>
</html>

CSS

body {
background-color: #ffd31f;
background-image: url("grafiki/tlo.svg");
background-repeat: repeat;
}

EDIT.
Sprawdzałem pod operą i działa rzeczywiście, ale przy przybliżaniu/oddalaniu coś świruje - nie skaluje grafik tylko je od siebie oddala/przybliża. A po to jest przecież "Scalable Vector Graphics" żeby się dało skalować...

el.pescado · Post autor: **el.pescado** » 30 lip 2009, 20:37

Jeśli chcesz, żeby strona była traktowana przez Firefoksa jako XHTML, musi być ona wysyłana z nagłówkiem HTTP Content-Type: application/xhtml+xml. Samo <meta> nie wystarczy. Niemniej jednak, nie wiem czy o to chodzi.

PS. https://developer.mozilla.org/en/SVG_In ... troduction

slomianowlosy · Post autor: **slomianowlosy** » 30 lip 2009, 21:00

el.pescado pisze:Jeśli chcesz, żeby strona była traktowana przez Firefoksa jako XHTML, musi być ona wysyłana z nagłówkiem HTTP Content-Type: application/xhtml+xml. Samo <meta> nie wystarczy. Niemniej jednak, nie wiem czy o to chodzi.

Jeśli dobrze zrozumiałem wychodzi na to że strona musi sobie siedzieć na serwerze żeby ją podglądać?

el.pescado pisze: PS. https://developer.mozilla.org/en/SVG_In ... troduction

A z tego jeśli dobrze zrozumiałem wynika, żeby osadzać kod SVG bezpośrednio na stronie, a nie z zewnętrznego pliku. Tyle że taki svg z inkscape zajmie milion linijek i nieźle zabrudzi ten kod...

Przydałoby się coś dzięki czemu po prostu działało tak jak w operze, tylko żeby się skalowało, bez za dużego komplikowania.

sibul · Post autor: **sibul** » 30 lip 2009, 22:01

body {
background-color: #ffd31f;
background-image: url("grafiki/tlo.svg");
background-repeat: repeat;
}

Kod: Zaznacz cały

body{
background:#ffd31f url(grafiki/tlo.svg) repeat;
}

Nie radzę stosować grafik w formacie .svg.
Do tworzenia stron stosuje się pospolite formaty jak png jpg gif.
Wektorki, możesz sobie we flashu zastosować.

Hauleth · Post autor: **Hauleth** » 31 lip 2009, 01:46

tak się składa @sibul, że SVG jest promowany przez W3C

slomianowlosy · Post autor: **slomianowlosy** » 31 lip 2009, 17:09

sibul pisze: Do tworzenia stron stosuje się pospolite formaty jak png jpg gif.
Wektorki, możesz sobie we flashu zastosować.

Ale ja nie chcę być pospolity tylko wielce oryginalny! ^^

Hauleth pisze:tak się składa @sibul, że SVG jest promowany przez W3C

O no właśnie. A to że IE nie obsługuje to już trudno, na IE mi nie zależy ] będą mieli brzydszą stronke pod IE

sibul · Post autor: **sibul** » 31 lip 2009, 17:12

Hauleth pisze:tak się składa @sibul, że SVG jest promowany przez W3C

Nie odczułem żadnej promocji SVG poprez W3C, a długo już się tym zajmuję.

el.pescado · Post autor: **el.pescado** » 31 lip 2009, 17:30

Nie radzę stosować grafik w formacie .svg.
Do tworzenia stron stosuje się pospolite formaty jak png jpg gif.
Wektorki, możesz sobie we flashu zastosować.

Ale pytanie nie brzmiało czy stosować svg, tylko jak osadzić svg w css. Idąc tym rozumowaniem można stwierdzić, że:

Nie radzę stosować Ubuntu.
Na komputerach stosuje się pospolite systemy operacyjne jak MS Windows.
Linuksy to sobie w tosterze możesz zastosować.

I zamknąć to forum.

f00sek · Post autor: **f00sek** » 02 sie 2009, 14:22

@slomianowlosy: grafika wektorowa z samych zalożeń jest po to, aby dowolnie ją powiększać bez utraty jakości. A u Ciebie robisz powtarzanie tła - a więc po co to? Poza tym w stylach nie dasz rady powiększyć rozmiaru tła obrazkowego...

slomianowlosy · Post autor: **slomianowlosy** » 02 sie 2009, 15:58

f00sek pisze:@slomianowlosy: grafika wektorowa z samych zalożeń jest po to, aby dowolnie ją powiększać bez utraty jakości. A u Ciebie robisz powtarzanie tła - a więc po co to? Poza tym w stylach nie dasz rady powiększyć rozmiaru tła obrazkowego...

Bo tło wygląda tak: Obrazek

i się powtarza, więc nie ma po co rozciągać tego na, załóżmy 800x600, bo to wciąż będzie to samo.

Hauleth · Post autor: **Hauleth** » 02 sie 2009, 20:25

to walnij to jako png, będzie prościej, bo nie jest to jakaś super wielka grafika.

slomianowlosy · Post autor: **slomianowlosy** » 02 sie 2009, 21:49

Hauleth pisze:to walnij to jako png, będzie prościej, bo nie jest to jakaś super wielka grafika.

Prościej owszem, ale zamierzenie jest takie że wszystko wektorowe będzie, więc i taka pierdółka.

[CSS] grafika wektorowa w CSS

[CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Odp: [CSS] grafika wektorowa w CSS

Kto jest online