Ministerul Educației și Cercetării al RepubliciMoldova

Universitatea Tehnică a Moldovei

Facultatea Calculatoare, Informatică şi Microelectronică
Departamentul Microelectronică și Inginerie Biomedicala

RAPORT
Lucrare de laborator nr.3
Grafica pe Calculator
Tema: Grafică vectorială

A efectuat : st. gr. IBM-211 Curașov Cristina

A verificat: asis. univ. Toma Olga

Chișinău 2022

1
 Cuprins
Introducere............................................................................................................................................
Sarcina1.................................................................................................................................................
Sarcina2.......................................................................................................................................5
Concluzii.....................................................................................................................................6
Bibliografie...........................................................................................................................................
Anexa1........................................................................................................................................8
Anexa2......................................................................................................................................10
Anexa3......................................................................................................................................11

2
 INTRODUCERE

Formatul SVG - Scalable Vector Graphics din engleză - "grafică

vectorială proporționabilă", este un limbaj pentru descrierea de imagini 2D
folosind XML. Este un standard al organizației W3C a cărui proiectare a început
în anul 1999. Permite definirea imaginilor prin 3 metode: text, grafică vectorială
și "bitmap-uri" (fișiere în formatul BMP).
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

3
 incluse în imagine; prin aceasta ele pot fi randate la fel în orice
situație;

Sarcina 1

Tema: Studierea primitivelor grafice vectoriale

Scopul lucrării: Obținerea cunoștințelor practice în sinteza scenelor grafice

vectoriale 2D, utilizând primitivele grafice simple SVG.

Sarcina lucrării:

1. Elaborați un program pentru sinteza unei scene 2D statice utilizînd

elementele grafice necesare cum ar fi: <rect>, <circle>, <ellipse>, <line>,
<polyline>, <polygon>, <path>, împreună cu atributele corespunzătoare, scena
trebuie să conțină un element <text> plasat în colțul dreapta jos a ecranului care ar
indica numele, prenumele și grupa studentului.

4
 Sarcina 2
Tema: Studierea primitivelor grafice vectoriale

Scopul lucrării: Obținerea cunoștințelor practice în sinteza scenelor grafice

vectoriale 2D, utilizând primitivele grafice simple SVG.

Sarcina lucrării:

2. Elaborați un program care crează versiunea vectorială a personajul desenat

în lucrarea de laborator nr.1. Variantele sunt indicate în tabelul 1.2. E permis de
realizat în editor grafic vectorial.

5
 ADOBE ILLUSTRATOR
Acesta este un program pentru crearea de grafice vectoriale. Spre deosebire de
fotografii sau alte imagini raster, care sunt alcătuite din puncte mici multicolore
(pixeli), imaginile vectoriale sunt formate din linii curbe. Curbele sunt definite
prin formule matematice: orice model dintr-un vector poate fi descris prin
coordonate. Din cauza acestui principiu, este dificil să creați imagini detaliate,
dar fișierele de imagine cântăresc puțin și se încarcă rapid.

Imaginile din Illustrator sunt formate din forme individuale colorate. Puteți edita
conturul acestor forme, puteți adăuga diferite umpleri sau linii. Pentru a obține o
imagine cu drepturi depline, cu mai multe culori, trebuie să colectați mai multe
forme împreună. În Illustrator, acestea sunt stivuite una peste alta, ca într-o
aplicație, și le puteți schimba ordinea pe măsură ce lucrați.

Pe lângă umplerile cu o singură culoare, degradeurile, diferitele niveluri de

transparență, capacitatea de a adăuga efecte este disponibilă în program. Este, de
asemenea, foarte convenabil să lucrați cu text în Illustrator: este ușor să mutați
etichete, să editați parametrii fontului și, dacă doriți, literele pot fi convertite în
curbe și pot lucra cu ele ca în formele vectoriale obișnuite.

De exemplu, funcția TEXT DUPĂ CONTUR ( ) oferă posibilitatea de a

aranja textul după un contur prealabil prestabilit.

6
În Illustrator, cum și în alte aplicații pentru crearea vectorilor, se aplică
straturile. Illustrator permite stingerea și aprinderea anumitor straturi
pentru ușurarea lucrului.

7
 Concluzie

În această lucrare am studiat mai aprofundat formatul SVG și am studiat noi

aplicații pentru crearea versiunii vectoriale a personajul desenat în lucrarea de
laborator nr.1. În lucrare, am utilizat aplicația Adobe Illustrator.

În rezultat, am obținut cunoștințe practice în sinteza scenelor grafice vectoriale

2D, utilizând primitivele grafice simple SVG și am desluțșit

8
 Bibliografie

 https://p5js.org/reference/ 
 https://github.com/processing/p5.js/wiki/p5.js-overview 
 https://ja-rastu.ru/raskraski/uroki/1079-poshagovoe-risovanie-

zhivotnyh-iz-geometricheskih-figur.html 
 https://www.youtube.com/watch?v=8j0UDiN7my4
 https://www.youtube.com/watch?v=HerCR8bw_GE&list=PLRqwX-
V7Uu6Zy51Q-x9tMWIv9cueOFTFA
 https://www.youtube.com/watch?v=gs8MG8hjSM0
 https://www.youtube.com/watch?v=o9sgjuh-CBM

9
 Anexa 1
Codul programului

<svg height="500" width="500" >

///////////polyline
<polyline points="0,0,0,500,500,0,500,500"
style="fill:#BFECEE;stroke:black;stroke-width:2" />
/////// line
<line x1="100" y1="100" x2="400" y2="400" style="stroke:#3ECA1C; stroke-width:3" />
///////rect
<rect x="150" y="150" rx="0" ry="0" width="200" height="200"
style="fill:#F5B041;stroke:black;stroke-width:2" />
///////////ellipse
<ellipse cx="150" cy="150" rx="30" ry="30"
style="fill:#FF00FF;stroke:black;stroke-width:2" />
<ellipse cx="350" cy="350" rx="30" ry="30"
style="fill:#FF00FF;stroke:black;stroke-width:2" />

//////////polygon

<polygon points="380,210, 270,120, 355,144" style="fill:#D5C872;stroke:purple;stroke-

width:1" />

//////////path
<path id="lineAB" d="M 0 0 l 500 0" stroke="black"
stroke-width="7" fill="none" />
<path id="lineBC" d="M 0 20 l 500 0" stroke="black"
stroke-width="2" fill="none" />
10
 <path d="M 500 500 l 0 500" stroke="black"
stroke-width="7" fill="none" />
//////////// circle
<circle cx="345" cy="155" r="10" stroke="none" stroke-width="4" fill="red" />
/////////text
<text font-size="70" x="150" y="270" style="fill:#FFEB00;stroke:none;stroke-width:0">
PIZZA</text>
<text font-size="22" x="0" y="0" fill="#DC143C" transform="translate(150,465) "> IBM-
211 CurașovCristina</text>
</svg>

Anexa 2
Rezultatele executarii

11
 Anexa 3

Rezultatele executarii

12