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

#0 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-06 16:07:06 (677 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   2 puncte

1 2
<< Precedenta      Următoarea >>

#26 by ceekay () (0 mesaje) at 2011-04-07 16:41:20 (677 săptămâni în urmă) - [Link]Top
#11 Ulpius, "... kiar si alcel cu Adobe ..." - da?

Tu ştii ce e asta "imagine vectorială"?
Tu ştii, din punct de vedere GRAFIC, care e diferenţa dintre EPS, AI, CDR şi SVG?
Tu ştii că toate patru formate de imagini enunţate mai sus de mine sunt formate de imagini vectoriale, care pot fi scalabile la infinit?

Ceea ce a spus micnic este foarte corect. Limbajul de care tu vorbeşti cu atâta înverşunare nu face decât să manipuleze cu amplasarea/modificarea culorilor cu ajutorul unui script pe o imagine SVG, deschisă într-un browser. Dacă browserele ar avea încorporate parsere de EPS sau AI, ele ar citi cu acelaşi succes şi cu aceeaşi uşurinţă şi formatele amintite acum de mine.

SVG este un format de păstrare a imaginilor vectoriale. Asta este tot.

Scripturile despre care vorbeşti sunt, de fapt, scripturi care manipulează cu poziţia şi nuanţa culorilor din imaginea ta.


Mesaj util ?   Da   0 puncte
#27 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 17:20:35 (677 săptămâni în urmă) - [Link]Top
#26 ceekay, aga....eu nush si ai vrit sa ini arati cu asta "Tu ştii ce e asta "imagine vectorială"?" - nush daca mai pot comenta ceva :lol:


Mesaj util ?   Da   0 puncte
#28 by ceekay () (0 mesaje) at 2011-04-07 17:29:13 (677 săptămâni în urmă) - [Link]Top
#27 Ulpius, "... nush daca mai pot comenta ceva ..." - asta a fost suficient.

Acum, explică, în limbaj normal, cum se programează un SVG. Sau arată SVG-uri programate de tine!


Mesaj util ?   Da   0 puncte
#29 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 17:30:43 (677 săptămâni în urmă) - [Link]Top
#28 ceekay, ... eu nu desenez SVG eu am facut topik da stiu SVG'u


Mesaj util ?   Da   0 puncte
#30 by ceekay () (0 mesaje) at 2011-04-07 17:37:09 (677 săptămâni în urmă) - [Link]Top
#29 Ulpius, "... eu am facut topik da stiu SVG'u ..." - atunci demonstreaza ca stii SVG'u! :declare:


Mesaj util ?   Da   0 puncte
#31 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 17:38:40 (677 săptămâni în urmă) - [Link]Top
#30 ceekay, Uite fii activ pe topic :fun: poti sa editezi da vreu sa fie tema ....


Mesaj util ?   Da   0 puncte
#32 by ceekay () (0 mesaje) at 2011-04-07 17:40:42 (677 săptămâni în urmă) - [Link]Top
#31 Ulpius, Atunci, eu mai întreb odată: care e utilitatea temei date? Pentru că tu ai adus doar informaţia din Wikipedia!
Tu nu ai adus nimic propriu, nimic prin care să demonstrezi utilitatea SVG-ului.


Mesaj util ?   Da   0 puncte
#33 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 17:47:24 (677 săptămâni în urmă) - [Link]Top
#32 ceekay, nu cei care au intrebari despre asta cum se deseneaza intrebari de programare aici pot intreba cei care stiu raspund ...


Mesaj util ?   Da   0 puncte
#34 by ceekay () (0 mesaje) at 2011-04-07 17:54:34 (677 săptămâni în urmă) - [Link]Top
#33 Ulpius, "... nu cei care au intrebari despre asta cum se deseneaza intrebari de programare aici pot intreba cei care stiu raspund ... ..." -

http://www.torrentsmd.com/details.php?id=667619
http://www.torrentsmd.com/details.php?id=942883

Sau, altfel spus, mai citeşte odată prostia fără virgule scrisă de tine...


Mesaj util ?   Da   1 puncte
#35 by zlodey (Knight of TMD) (1 mesaje) at 2011-04-07 19:39:04 (677 săptămâni în urmă) - [Link]Top

cînd creezi o temă pe t.md, te stărui să o aduci din surse INACCESIBILE pentru restul utilizatorilor, sau din surse accesibile dar ÎMBUNĂTĂTŢITĂ (de exemplu tradusă în română, sau cu detalii suplimentare adăugate de tine).

copy/paste e o prostie foarte mare. Topic inutil !!!

(...) în puţinele momente de luciditate
mă gîndesc că e ideal să n-ai utilitate !

Paraziţii (C)




Mesaj util ?   Da   1 puncte
#36 by orlistul (Power User) (0 mesaje) at 2011-04-07 20:23:50 (676 săptămâni în urmă) - [Link]Top
Acest mesaj nu respecta eticheta de comunicare și a fost ascuns. Click dacă oricum dorești să-l vezi.
#37 by $anek (IT'S REKT O'CLOCK) (3 mesaje) at 2011-04-07 20:35:37 (676 săptămâni în urmă) - [Link]Top
#36 orlistul, dai pace, nu exista topic unde sa nu isi deseneze nick'ul. Ce sa-i faci, baiatul vre s-arate ca ii taticul design'ului
:rofl:

(Acest mesaj încalcă eticheta de comunicare și a fost ascuns. Te rog să nu răspunzi la el, discuțiile trebuie să fie strict la subiect.)
#38 by zlodey (Knight of TMD) (1 mesaje) at 2011-04-07 20:40:19 (676 săptămâni în urmă) - [Link]Top

de ce n-ai ales şi vreo cîteva topicuri create zece ani în urmă ?  :blink:
s-a încercat să i se lămurească autorului că NU e niciun folos din această temă, plus la toate văd că autorul dă dovadă de slabe cunoştinţe în domeniu. În mod normal el ar trebui să fie cel care să răspundă la întrebările neştiutorilor, iar el ce face ? - CORECT:  induce în eroare pe cei care şi aşa nu prea multe ştiu !  :slap:
ar trebui să-l mîngîi pe cap pentru asta ?


#37 $anek, dacă ceekay într-adevăr cunoaşte domeniul dat, de ce să nu se expună ?  :blink:



Mesaj util ?   Da   0 puncte
#39 by ceekay () (0 mesaje) at 2011-04-07 20:46:18 (676 săptămâni în urmă) - [Link]Top
informaţie de ordin general: ca să vezi! Eu chiar sunt profesor la universitate!
Autorul unei teme nu e obligat să fie guru, dar trebuie să poată răspunde la întrebările apărute.


Mesaj util ?   Da   0 puncte
#40 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-07 20:47:44 (676 săptămâni în urmă) - [Link]Top
Edit...


Mesaj util ?   Da   0 puncte
#41 by ceekay () (0 mesaje) at 2011-04-07 21:09:38 (676 săptămâni în urmă) - [Link]Top
#37 $anek, ei si tu chiar asa... Faci impresia ca sunt unul din cei mai urmariti utilizatori de pe acest tracker... Desi, daca esti un asa de bun observator si ma vezi prezent si pe alte teme, inseamna ca cele spuse de mine au importanta si ajung la publicul tinta. Faptul ca pe voi va deranjeaza prezenta mea este doar problema voastra! Daca aveti ceva impotriva mea, nu va fie rusine, si spuneti ce aveti pe suflet! In cazul in care aveti dreptate, admit ca am gresit. In alte cazuri, nu sunteti decat niste oameni care cauta cearta... Sau, in limbajul actual al internetului, sunteti niste troll-i.


Mesaj util ?   Da   2 puncte
#42 by Milenas (Redactor) (0 mesaje) at 2011-04-07 21:15:38 (676 săptămâni în urmă) - [Link]Top
#Ulpius Tema interesanta. Se vede chiar dupa reitingul
si nivelul de cunostinte al persoanelor antrenate in discutie.
O tema banala sau lipsita de interes, nici nu provoaca discutii,
pur si simplu nu este observata de nimeni. :)


Mesaj util ?   Da   0 puncte
#43 by orlistul (Power User) (0 mesaje) at 2011-04-07 21:17:30 (676 săptămâni în urmă) - [Link]Top
#42 Milenas, "plius o mie" - sper că s-a înţeles aluzia :rofl:

discuţia constructivă creează mereu ceva frumos şi inedit


Mesaj util ?   Da   0 puncte
#44 by Jeka♥ (La Nesfârșit) (5 mesaje) at 2011-04-07 21:39:07 (676 săptămâni în urmă) - [Link]Top
nu prea eram informat,ms


Mesaj util ?   Da   0 puncte
#45 by Gts (Uploader) (0 mesaje) at 2011-04-09 06:50:02 (676 săptămâni în urmă) - [Link]Top
эдит )

Editat de către Gts la 2011-04-09 12:36:22




Mesaj util ?   Da   0 puncte
#46 by $anek (IT'S REKT O'CLOCK) (3 mesaje) at 2011-04-09 11:20:48 (676 săptămâni în urmă) - [Link]Top
+1

Editat de către $anek la 2011-04-09 12:59:22




Mesaj util ?   Da   0 puncte
#47 by zeus10 (Power User) (0 mesaje) at 2011-04-09 14:44:28 (676 săptămâni în urmă) - [Link]Top
miemi imi ajunge si .png!


Mesaj util ?   Da   0 puncte
#48 by Ulpius (Real Niger!|Я Наказан Тип) (0 mesaje) at 2011-04-12 17:51:25 (676 săptămâni în urmă) - [Link]Top
#47 zeus10, PNG este Bitmap SVG este vectoriala pentru web ,etc.


Mesaj util ?   Da   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.