svg-icons

[orangenwerk]

egal mit welchem plugin ( möglichst jQuery )

sollte sich wie ein bild verhalten

=> in div als hintergrund ... gut scalierbar (sollte durch nutzer per slider verstellbar sein )

pixelgenaue darstellung muss gewährleistet sein !!!

[polka]

was hast du probiert??
svg's musste die pfade angeben und die füllungen, und nicht die svg.
paper.path().attr({fill: "#000", stroke: "none"});

[polka]

raphael >>

paper.path().attr({fill: "#000", stroke: "none"});

folgend der code für son dummes icon. !!!!!! schau dir
das comment im edit mode an !! wg escaping

# legt view port
Created with Raphaël 2.0.0

<path style="stroke-linejoin: round; opacity: 0;" fill="none" stroke="#ffffff" # attribute d="M22.221,10.853C22.11,10.439,21.96,10.440999999999999,22.442,9.314L24.102,5.795C24.123,5.744,24.302,5.383,24.294,4.849C24.309,4.32,23.981,3.5600000000000005,23.175,3.2070000000000003C22.003,2.652,22.005000000000003,2.6500000000000004,20.831,2.1000000000000005C20.047,1.7040000000000006,19.25,1.9290000000000005,18.852,2.2790000000000004C18.432,2.6120000000000005,18.268,2.979,18.243000000000002,3.0290000000000004L16.58,6.545C16.016,7.629,15.924999999999999,7.515,15.531999999999998,7.692C15.062999999999999,7.8...9999997,13.384000000000004C22.578,12.166,22.419,11.301,22.221,10.853ZM14.623,22.83C14.466999999999999,23.183,14.209999999999999,23.269,13.532,23.784999999999997C12.955,24.232999999999997,12.268,24.956999999999997,11.523,26.384999999999998L10.331999999999999,25.822999999999997C10.959999999999999,24.342999999999996,11.081999999999999,23.348999999999997,11.062,22.619999999999997C11.030999999999999,21.769,10.934,21.516,11.107,21.170999999999996L14.706,13.549999999999995L18.223,15.211999999999996L14.623,22.83Z" stroke-width="3" stroke-linejoin="round" opacity="0" transform="matrix(1,0,0,1,4,4)">

[orangenwerk]

und wo gibst du ihm ne größe und soweiter .. soweit seinen beispiel-code zu kopieren war ick denn doch schon

[polka]

nun dann hast du doch alles :)

also was ich meinte.. du hast dein standard logo format: weight, height = 40, 40 oder nimm 100_100. hierin wird gezecihnet. alle objecte haben eine größe, die sich aus ihrem pfad ergibt. in unserem fall existierte kein einziger punkt außerhalb der 100_100 area, wenn wir eine geschlossene form haben wollen.
also zeichne alle icons auf 100*100 größe extrahiere path, added path to Raphael. Raphael.path(''M 10 10L20 20, ..etc') scaliere auf größe des divs.

also nochmal die größe wird beim zeichnen erstellt. dann beim erzeugen des RaphaelObjectes. dann beim scalieren. hab noch keine andere möglichkeit gefunden.

die icons..auf raphaelJS sind nict anders.
hoffe das ist verständlich.

oder schick mir mal die icons.svg oder noch besser dessen json pendant, mit nem html tmeplate wo die icons reinsollen.

edit schick per mail

[orangenwerk]

icons existieren noch nicht in svg .. nur in corel

wäre noch andere fragen zu klären .. zB: klappen sprites (denn knapp 100 svgs wären ne menge unsinniger serveranfragen welche ein png abfangen würde)

dann müssten die icons speziell angelegt werden ? .. um auf zB. 100 px zu kommen

und sind die drei nötigen schritte nicht ein absoluter overkill wenn eventuell knapp 30 icons pro Seite ( und bis zu 200 optional)

wünch dir n icon, dann schick ich ihn dir per mail / scype

interessant wäre auch müssen svgs existieren oder reicht der path ??

[polka]

das mit dem overkill dachte ich auch...
aber vorerst: sprites nein.

svg's müssen nicht existieren, der pfad ist das gebrauchte, doch hier ist viellicht der overkill:
path = { name: "M...L...", name: " pfad" }
meine "idee" das objectliteral hat n namen die css klasse matchen, für jeden suche html elemente, zeichne mit raphael. >> du hast hundert svg elemente zu generieren >> overkill

dswg habsch ja auch fabricJS gezeigt. hier jedoch das problem auch nen overhead.
easelJS bietet ähnliches.

das wichtige wäre halt den "passenden" zu haben. also den der sich in nem sagen wir 100x100 viewport befindet. zehner system macht sich einfacher beim skalieren.

dann könnte man sagen wir wählen 4libs aus, und testen alle mit benchmarks.
problem hier ist das gecko, webkit und vorallem v8 kaum vergleichbar sind. man bei also große browser unterschiede in kauf zu nehmen hat.

hinsichtlich dessen tendiere ich zu png's. sony-erricson hat zb zwar rapahel nutzt dieses aber für gerade mal 2 logos auf der seite.
svg >> SCALIERBAR
png >> eben nicht
canvas >> auch pixel basiert >> dh alles müsste immer neu gerendert werden.

[orangenwerk]

also bei vielen icons pro seite fallen svgs aus ? .. mh schade

[polka]

testen