Forum Index > Open Source > Scalable Vector Graphics(SVG)

#0 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-06 16:07:06 (354 săptămâni în urmă) - [Link]Top
SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. Это открытый стандарт, является рекомендацией консорциума W3C, — организации, разработавшей такие стандарты, как HTML и XHTML. Разрабатывается с 1999 года, в 2001 году вышла 1.1 версия, которая остается актуальной до сегодняшнего дня, в активной разработке версия 1.2. В основу SVG легли языки разметки VML и PGML.

Возможности языка

Описание путей (англ. path). Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты. Строка с данными задаётся атрибутом d тега path и содержит команды, закодированные набором букв и чисел. Буква определяет тип команды, числа — её параметры (чаще всего — координаты). Команды позволяют описывать фигуры, состоящие из отрезков прямых (L, H, V), кривых Безье (C, S, Q, T) и дуг (A). Пример, описывающий звезду из 5 линий, содержит строку данных с командами M (англ. moveto — переместить) и L (англ. lineto — нарисовать линию), содержащими в качестве аргументов координаты точек по X и Y.

Code

<path fill="none" stroke="black" d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />


Quote:



Растровое изображение содержит в себе информацию о точках, а векторное — о фигурах. Здесь показано ключевое преимущество «вектора» над «растром».


Достоинства формата

Текстовый формат — файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов. При просмотре документов, содержащих SVG графику, имеется доступ к просмотру кода просматриваемого файла и возможность сохранения всего документа. Кроме того, SVG файлы обычно получаются меньше по размеру, чем сравнимые по качеству изображения в форматах JPEG или GIF, а также хорошо поддаются сжатию.
Масштабируемость — SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества. Дополнительно, к элементам SVG документа возможно применять фильтры — специальные модификаторы для создания эффектов, подобных применяемым при обработке растровых изображений (размытие, выдавливание, сложные системы трансформации и др.) В тексте SVG-кода фильтры описываются тегами, визуализацию которых обеспечивает средство просмотра, что не влияет на размер исходного файла, обеспечивая при этом необходимую иллюстративную выразительность.
Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.
Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых серверов.
Анимация реализована в SVG с помощью языка SMIL (Synchronized Multimedia Integration Language), разработанного также консорциумом W3C. Поддерживаются скриптовые языки на основе спецификации ECMAScript. SVG-элементами можно управлять с помощью JavaScript. Применение скриптов и анимации в SVG позволяет создавать динамичную и интерактивную графику. В SVG обеспечивается событийная модель, отслеживаются события (загрузка страницы, изменение ее параметров, события мыши, клавиатуры и др.) Анимация может запускаться по определенному событию (например «onmouseover» или «onclick»), что придаёт графике интерактивность. У каждого элемента есть свои собственные события, к которым можно привязывать отдельные скрипты.
SVG — открытый стандарт. В отличие от некоторых других форматов, SVG не является чьей-либо собственностью.
SVG документы легко интегрируются с HTML и XHTML документами. Внешний SVG подключаются через тег <object>, значение атрибута data — имя файла с расширением «.svg», содержащего разметку SVG, type — MIME-тип, то есть image/svg+xml. Атрибуты width и height определяют размеры области SVG по горизонтали и по вертикали. Элементы SVG совместимы с HTML и DHTML.
Совместимость с CSS (англ. Cascading Style Sheets). Отображением (форматированием и декорированием) SVG элементов можно управлять с помощью таблицы стилей CSS 2.0 и её расширений, либо напрямую с помощью атрибутов SVG элементов.
SVG предоставляет все преимущества XML:
Возможность работы в различных средах.
Интернационализация (поддержка Юникода).
Широкая доступность для различных приложений.
Лёгкая модификация через стандартные API — например, DOM. SVG поддерживает стандартизированную W3C объектную модель документа DOM, обеспечивая доступ к любому элементу, что даёт широкие возможности по динамическому изменению элементов, их атрибутов и событий.
Лёгкое преобразование таблицами стилей XSLT. Как любой основанный на XML формат, SVG дает возможность использовать для его обработки таблицы трансформации (XSLT). Преобразуя XML-данные в SVG с помощью простого XSL, можно легко получить графическое представление любых данных, например визуализировать химические молекулы, описанных на языке CML (Chemical Markup Language).

Пример
Простой статичный SVG-документ с контуром квадрата размером 400 пикселей и тремя полупрозрачными кругами радиусом 100 пикселей, по центру квадрата, каждый круг смещается от центра квадрата примерно на пол радиуса.

Code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version = "1.1"
    baseProfile="full"
    xmlns = "http://www.w3.org/2000/svg"
    xmlns:xlink = "http://www.w3.org/1999/xlink"
    xmlns:ev = "http://www.w3.org/2001/xml-events"
    height = "400px"  width = "400px">
    <rect x="0" y="0" width="400" height="400"
          fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
    <g fill-opacity="0.7" stroke="black" stroke-width="0.5px">
        <circle cx="200px" cy="200px" r="100px" fill="red"  transform="translate(  0,-50)" />
        <circle cx="200px" cy="200px" r="100px" fill="blue"  transform="translate( 70, 50)" />
        <circle cx="200px" cy="200px" r="100px" fill="green" transform="translate(-70, 50)" />
    </g>
</svg>


Romanian Translating by $anek

Ce este SVG?
SVG (din eng. Scalable Vector Graphics) este un limbaj pentru descrierea de imagini 2D folosind XML. Este creat de organizaţia W3C, care si-a inceput activitiatea in anul 1999. Permite definirea imaginilor prin 3 metode: text, grafică vectorială şi "bitmap-uri" (fişiere оn formatul BMP). W3C a creat la fel si HMTL si XHTML. In 2001 a fost lansata versiunea 1.1 care nu s-a schimbat pina in ziua de azi. Deşi există aplicaţii specializate pentru crearea şi editarea de SVG-uri, in acest scop poate fi folosit orice editor text cum ar fi notepad spre exemplu.

Caracteristicile Limbajului:

Permite crearea oricarei figuri cu o linie compacta, descrie calea de la punctul de plecare pвnă la sfвrşit prin orice coordonate intermediare. Linia cu datele furnizate se dau de catre tag-ul "d" al path'ului si contine comenzi, codificate de un set de litere şi cifre. Litera identifica tipul de comanda, iar cifra - parametrii (cel mai de coordonatele). Comenzile ne permite sa descrim figura, care sunt compuse de catre segvente de linie (L, H, V), curbe bezier (C, S, Q, T) si arcuri (A).
Exemplu, descrierea unei stele din 5 linii, contine un rind de date cu comenzile M si L (unde M - moveto - muta la; L - lineto - a desena linie). conţinвnd ca argumente coordonatele punctelor X şi Y.

Code

<path fill="none" stroke="black" d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />


Fisierele SVG pot fi citite si redactate cu ajutorul oricaror aplicatii care permite citirea documentelor, deseori notepad. La documentele care contin Grafica SVG, e posibila cu usurinta vizualizarea codului documentului si posibilitatea de a il salva. Inafara de aceasta fisierele SVG au o marime mai mica comparind dupa calitatea imaginilor cu format JPG sau GIF, si usor le putem arhiva.
SVG este un format vectorial. La marirea orcarei parti a imaginii, documentul nu isi pierde calitatea.
La SVG este posibilita adaugarea filtrelor — modificari speciale pentru crearea efectelor, acestea sunt utilizate оn prelucrarea imaginilor bitmap.
Textul in grafica SVG este insusi ca text, dar nu imagine, de aceea este usor de selectat si de copiat.
SVG este un standar deschis. Spre deosebire de celelalte formate, el nu este proprietatea cuiva.

Elemente componente:


Principalele elemente din componenţa unui fişier SVG sunt:
*Paths. "Căile" pot fi folosite pentru descrierea conturului unei forme. Conturul poate rămâne gol sau poate fi umplut. Căile pot fi folsite şi pentru a specifica zonele de decupare;
*Forme de bază. Specificaţia SVG oferă posibilitatea folosirii următoarelor forme de bază: dreptunghi, cerc, elipsă, linii şi poligoane. Acestea pot fi construite şi cu ajutorul căilor care au acelaşi contur;
*Text. Pentru a specifica textul ce apare într-o imagine trebuie folosite elemente de tipul text;
*Painting. Se referă la posibilitatea de a umple formele specificate în SVG. Pentru aceasta poate fi folosită o singură culoare, o culoare cu transparenţă, un gradient sau un model;
*Culoare. Propietatea culoare este folsită pentru specificare culorii;
*Gradient şi model. Folosite pentru colorarea formelor specificate;
*Decupare, mascare. În SVG pot fi folosite zone de decupare sau de mascare;
*Filtre. Filtrele descriu diferite efecte aplicate imaginilor;
*Interactivitate. O imagine SVG are posibilitaea de a interacţiona cu utilizatorul. Astfel, la apăsarea unui buton sau la folosirea mausului pot fi pornite diferite scripturi;
*Linkuri. Un document poate conţine legături către alte pagini sau elemente din web;
*Scripting. Într-un SVG pot fi definite scripturi cu diverse funcţii;
*Animaţii. Pentru un SVG pot fi specificate diverse tipuri de animaţii;
*Font. Nu este necesar ca utilizatorul final să aibă deja instalate diferitele seturi de caractere ("fonturi") folosite. Fonturile pot fi incluse în imagine; prin aceasta ele pot fi randate la fel în orice situaţie;
*Metadata. Pentru intregrarea mai bună webul semantic oferă şi opţiunea specificării de metadata (acestea sunt datele care descriu datele propriu-zise).

ÎnchideЗакрыть
SVG Video Lesson


ÎnchideЗакрыть

P.S. Aici puteti vedea Exemple in SVG

Editat de către Ulpius la 2011-05-21 14:07:37




Mesaj util ?   Da / Nu   2 / 0   2 puncte

1 2
<< Precedenta      Următoarea >>

#1 by $anek (IT'S REKT O'CLOCK) (2 mesaje) at 2011-04-06 22:50:39 (354 săptămâni în urmă) - [Link]Top
:good1:


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#2 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-06 22:54:06 (354 săptămâni în urmă) - [Link]Top
Programam in SVG :lol:


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#3 by $erhio12Participant la concursul Counter-Strike Masters Tournament (Patriseamba <3) (0 mesaje) at 2011-04-06 23:36:07 (354 săptămâni în urmă) - [Link]Top
mă rup imaginile SVG

p.s bv pentru temă :bravo:


Mesaj util ?   Da / Nu   1 / 0   1 puncte
#4 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-06 23:40:36 (354 săptămâni în urmă) - [Link]Top
#3 Serhio12, SVG Rulit cine stie sa programeze foarte bine ...calitatea la imagine este excelenta oricit zoom nu iai da si se observa cupa culori ca SVG umple pixelii ceea ce arata foarte bine imaginea...


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#5 by System at 2011-04-07 00:22:35 (354 săptămâni în urmă) - [Link]Top
spune cumva de marit rezolutia la imagine prin aceasta programa,de exemplu din 160x120 in mai mare si sa se pastreze calitatea ?


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#6 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 00:26:51 (354 săptămâni în urmă) - [Link]Top
#5 KnightAndrey, Asta nui Programa :)

http://www.croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg

fa zoom aici si uite la calitate daca se schimba


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#7 by $anek (IT'S REKT O'CLOCK) (2 mesaje) at 2011-04-07 00:32:16 (354 săptămâni în urmă) - [Link]Top
#5 KnightAndrey, trebuie singur sa o desenezi

Editat de către $anek la 2011-04-07 01:00:33




Mesaj util ?   Da / Nu   1 / 0   1 puncte
#8 by ceekay () (0 mesaje) at 2011-04-07 01:23:23 (354 săptămâni în urmă) - [Link]Top
Care a fost sensul să copii wikipedia pe tmd?

http://ru.wikipedia.org/wiki/SVG

De ce nu ai copiat şi versiunea în limba română?

:locked:


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#9 by WaterBoy (User) (0 mesaje) at 2011-04-07 10:11:55 (354 săptămâni în urmă) - [Link]Top
#8 ceekay, "... Care a fost sensul să copii wikipedia pe tmd? ..." - goana după " tre sî fac cît mai multi cool topeguri pi tmd".


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#10 by micnic (TMD adept | Fanatic Coder) (0 mesaje) at 2011-04-07 10:55:33 (354 săptămâni în urmă) - [Link]Top
#4 Ulpius, se programeaza in limbaje de programare, SVG e un limbaj bazat pe XML (eXtended Markup Language), care este un limbaj de marcare a textului. Este un standard web pentru definirea imaginilor vectoriale. Cine e interesat, poate utiliza Inkscape pentru editare :wink:


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#11 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 15:00:57 (354 săptămâni în urmă) - [Link]Top
#10 micnic, :lol: ai descoperit amerika ... de programe de editare stiu toti , se pot gasi pe net dar aici se invata programarea in SVG nu editarea ..... desenarea in SVG ....

#8 ceekay, :lol: Asa am decis ,ceva importiva? .... P.S. nu tiam inteles faza, toate temele de forum kiar si alcel cu Adobe al tau tot este pe net :lol: asa ca ....


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#12 by Kryz0r (român!) (0 mesaje) at 2011-04-07 15:09:55 (354 săptămâni în urmă) - [Link]Top
pune şi în limba română!


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#13 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 15:12:30 (354 săptămâni în urmă) - [Link]Top
#12 Kryz0r, Va fi curind :)


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#14 by $anek (IT'S REKT O'CLOCK) (2 mesaje) at 2011-04-07 15:12:50 (354 săptămâni în urmă) - [Link]Top
#12 Kryz0r, tii greu sa traduci?


Mesaj util ?   Da / Nu   1 / 0   1 puncte
#15 by micnic (TMD adept | Fanatic Coder) (0 mesaje) at 2011-04-07 15:14:45 (354 săptămâni în urmă) - [Link]Top
#11 Ulpius, ai stupi sau te faci? inca o data iti zic ca SVG nu e limbaj de programare, chiar si in #0 ai scris "... язык разметки масштабируемой векторной графики ...", de aceea nu e corecta exprimarea de "programare in SVG" e ca si cum ai spune "eu programez in Limba Romana", iti recomand doar exprimarea de a scrie in SVG sau a crea in SVG ceva... , intr-al doilea rind Inkscape nu e editor text ci e editor grafic freeware pentru editarea anume a imaginilor vectoriale SVG.

P.S. esti mare expert in SVG? (de creezi asa topic si numesti lucrurile straniu pe nume)

Editat de către micnic la 2011-04-07 15:20:37




Mesaj util ?   Da / Nu   0 / 0   0 puncte
#16 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 15:16:42 (354 săptămâni în urmă) - [Link]Top
#15 micnic, :lol: Inainte de a posta vezi 100 de ori ce scrii

SVG'u s programeaza si nu intelegi ....:)


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#17 by Kryz0r (român!) (0 mesaje) at 2011-04-07 15:17:40 (354 săptămâni în urmă) - [Link]Top
#14 $anek, da! foarte greu!


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#18 by $anek (IT'S REKT O'CLOCK) (2 mesaje) at 2011-04-07 15:17:57 (354 săptămâni în urmă) - [Link]Top
#17 Kryz0r, mai umbla la scoala atunci, nu sta numai la PC, jucind MMORPG


Mesaj util ?   Da / Nu   1 / 0   1 puncte
#19 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 15:21:18 (354 săptămâni în urmă) - [Link]Top
#15 micnic, da eu si tam zis in privinta la inkscape "... de programe de editare stiu toti ," - de inkscape am zis ....


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#20 by micnic (TMD adept | Fanatic Coder) (0 mesaje) at 2011-04-07 15:34:39 (354 săptămâni în urmă) - [Link]Top
#19 Ulpius, "... de programe de editare stiu toti ..." - sigur, toti se nasc experti, macar indica un instrument grafic pentru SVG in #0 ca toti cei care-s noi in domeniu si vad topicul se uita bunghiti la ce ai scris, nu inteleg si cred ca-i vreun program, si un "expert" ca tine se tine aici mare si tare...


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#21 by Kryz0r (român!) (0 mesaje) at 2011-04-07 15:36:06 (354 săptămâni în urmă) - [Link]Top
#18 $anek, zilnic merg la şcoală )



#18 $anek, "... MMORPG ..." - nu ştiu ce-i asta...


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#22 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 15:37:30 (354 săptămâni în urmă) - [Link]Top
#20 micnic, O sa editez ... eu nu ma cred mare expert da stiu sa dezenez .... nu ai inteles ce am zis de inkscape


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#23 by micnic (TMD adept | Fanatic Coder) (0 mesaje) at 2011-04-07 15:40:52 (354 săptămâni în urmă) - [Link]Top
#22 Ulpius, mie imi place sa fac critica constructiva :D , in orice caz, pentru cei foarte entuziasmati le spun ca in SVG se poate si de creat jocuri sau careva aplicatii utile, insa doar prin intermediului limbajului de programare JavaScript.


Mesaj util ?   Da / Nu   1 / 0   1 puncte
#24 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 15:42:10 (354 săptămâni în urmă) - [Link]Top
#23 micnic, ocupa putin din memorie ,se incarca repede :good1:


Mesaj util ?   Da / Nu   0 / 0   0 puncte
#25 by micnic (TMD adept | Fanatic Coder) (0 mesaje) at 2011-04-07 15:46:16 (354 săptămâni în urmă) - [Link]Top
#24 Ulpius, in comparatie cu flash da, consuma mai putin, insa in comparatie cu HTML5 Canvas - nu, acolo merge mai repede si consumul e cam de 5 ori mai putin ) SVG mai are plusul ca e usor de operat cu el si extras/introdus datele necesare in/din pagini web


Mesaj util ?   Da / Nu   0 / 0   0 puncte

1 2
<< Precedenta      Următoarea >>

Forum Index > Open Source > Scalable Vector Graphics(SVG)


Navigare rapidă:


Comunitatea digitală din Moldova. Să adunăm și să organizăm conținutul autohton de pe întreg internet pe un singur site web.