SVG - Perguntas da entrevista

O que SVG significa?

SVG significa Scalable Vector Graphics.

O que é SVG?

SVG é um formato baseado em XML para desenhar imagens vetoriais. É usado para desenhar imagens vetoriais bidimensionais.

Quais são os recursos do SVG?

A seguir estão os principais recursos do SVG -

SVG, Scalable Vector Graphics é uma linguagem baseada em XML para definir gráficos vetoriais.
O SVG se destina a exibir imagens na web.
Por serem imagens vetoriais, as imagens SVG nunca perdem qualidade, não importa como sejam reduzidas ou redimensionadas.
As imagens SVG suportam interatividade e animação.
SVG é um padrão W3C.
Outros formatos de imagem, como imagens raster, também podem ser combinados com imagens SVG.
SVG se integra bem com XSLT e DOM de HTML.

Quais são as vantagens de usar SVG?

A seguir estão as vantagens de usar imagens SVG -

Use qualquer editor de texto para criar e editar imagens SVG.
Por serem baseadas em XML, as imagens SVG são pesquisáveis, indexáveis e podem ser inseridas em script e compactadas.
As imagens SVG são altamente escaláveis, pois nunca perdem qualidade, não importa como sejam reduzidas ou redimensionadas.
Boa qualidade de impressão em qualquer resolução.
SVG é um padrão aberto.

Quais são as desvantagens de usar SVG?

A seguir estão as desvantagens de usar imagens SVG -

Sendo o tamanho do formato de texto é maior do que em comparação com imagens raster formatadas em formato binário.
O tamanho pode ser grande, mesmo para imagens pequenas.

Qual tag de SVG é usada para desenhar um retângulo?

A tag 'rect' do SVG é usada para desenhar um retângulo.

Qual tag de SVG é usada para desenhar um círculo?

A tag 'circle' do SVG é usada para desenhar um círculo.

Qual tag de SVG é usada para desenhar uma elipse?

A tag 'elipse' do SVG é usada para desenhar uma elipse.

Qual tag de SVG é usada para desenhar uma linha?

A tag 'line' do SVG é usada para desenhar uma linha.

Qual tag de SVG é usada para desenhar uma forma fechada que consiste em linhas retas conectadas?

A tag 'polígono' do SVG é usada para desenhar uma forma fechada que consiste em linhas retas conectadas.

Qual tag de SVG é usada para desenhar uma forma aberta que consiste em linhas retas conectadas?

A tag 'polyline' do SVG é usada para desenhar uma forma aberta que consiste em linhas retas conectadas.

Qual tag de SVG é usada para desenhar qualquer caminho?

A tag 'path' do SVG é usada para desenhar qualquer caminho.

Qual tag de SVG é usada para desenhar texto?

A tag 'text' do SVG é usada para desenhar texto.

Qual atributo de tag de texto de SVG representa os cordinates do eixo x de glifos?

O atributo 'x' da tag de texto de SVG representa os cordinates do eixo x de glifos.

Qual atributo de tag de texto de SVG representa os cordinates do eixo y de glifos?

O atributo 'y' da tag de texto de SVG representa os cordinates do eixo y de glifos.

Qual atributo da tag de texto do SVG representa a mudança junto com o eixo x?

O atributo 'dx' da tag de texto do SVG representa a mudança junto com o eixo x.

Qual atributo da tag de texto do SVG representa a mudança junto com o eixo y?

O atributo 'dy' da tag de texto do SVG representa a mudança junto com o eixo y.

Qual atributo da marca de texto do SVG define a rotação a ser aplicada a todos os glifos?

O atributo 'rotação' da marca de texto do SVG define a rotação a ser aplicada a todos os glifos.

Qual atributo da tag de texto do SVG define o comprimento de renderização do texto?

O atributo 'textlength' da tag de texto do SVG define o comprimento de renderização do texto.

Qual propriedade de traço define a cor do texto, linha ou contorno de qualquer elemento?

A propriedade 'stroke' define a cor do texto, linha ou contorno de qualquer elemento.

Qual propriedade de traço define a espessura do texto, linha ou contorno de qualquer elemento?

A propriedade 'stroke-width' define a espessura do texto, linha ou contorno de qualquer elemento.

Qual propriedade de traço define diferentes tipos de finalização de uma linha ou contorno de qualquer caminho?

A propriedade 'stroke-linecap' define diferentes tipos de finalização de uma linha ou contorno de qualquer caminho.

Qual propriedade de traço usada para criar linhas tracejadas?

Propriedade 'stroke-dasharray' usada para criar linhas tracejadas.

O que são filtros SVG?

SVG usa o elemento <filter> para definir filtros. O elemento <filter> usa um atributo id para identificá-lo exclusivamente. Os filtros são definidos dentro dos elementos <def> e, a seguir, são referenciados por elementos gráficos por seus ids.

Cite alguns dos arquivadores comumente usados.

O SVG fornece um rico conjunto de filtros. A seguir está a lista dos filtros comumente usados -

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap

O que são padrões SVG?

SVG usa o elemento <pattern> para definir padrões. Os padrões são definidos usando o elemento <pattern> e são usados para preencher os elementos gráficos de forma ladrilhada.

O que são gradientes SVG?

O gradiente se refere à transição suave de uma cor para outra dentro de uma forma. SVG oferece dois tipos de gradientes -

Gradientes Lineares
Gradientes Radiais

O que são gradientes lineares em SVG

Gradientes lineares representam a transição linear de uma cor para outra de uma direção para outra. É definido usando o elemento <linearGradient>.

O que são gradientes radiais em SVG

Gradientes radiais representam a transição circular de uma cor para outra de uma direção para outra. É definido usando o elemento <radialGradient>.

As imagens SVG podem ser responsivas às ações do usuário?

Sim! As imagens SVG podem ser responsivas às ações do usuário. SVG oferece suporte a eventos de ponteiro, eventos de teclado e eventos de documento.

Podemos escrever funções javascript em imagens SVG?

Sim! SVG suporta funções JavaScript / ECMAScript. O bloco de script deve estar no bloco CDATA, considere o suporte de dados de caracteres em XML.

Os eventos do mouse e do teclado são suportados no SVG?

Sim! Os elementos SVG suportam eventos de mouse, eventos de teclado. Usamos o evento onClick para chamar funções javascript.

Como obter um documento SVG usando javascript?

Em funções javascript, document representa o documento SVG e pode ser usado para obter os elementos SVG.

Como obter um elemento SVG ativo usando javascript?

Em funções javascript, evento representa o evento atual e pode ser usado para obter o elemento de destino no qual o evento foi gerado.

Qual elemento do SVG é usado para criar links?

O elemento <a> é usado para criar um hiperlink. O atributo "xlink: href" é usado para passar os IRI (Identificadores de Recursos Internacionalizados) que são complementares aos URI (Identificadores Uniformes de Recursos).

Como você incorporará uma imagem SVG na página HTML?

A imagem SVG pode ser incorporada das seguintes maneiras -

usando tag embed
usando tag de objeto
usando iframe

Como desenhar um retângulo em SVG?

A tag 'rect' do SVG é usada para desenhar um retângulo. A seguir estão os atributos comumente usados -

x- coordenada do eixo x da parte superior esquerda do retângulo. O padrão é 0.
y- coordenada do eixo y do canto superior esquerdo do retângulo. O padrão é 0.
width - largura do retângulo.
height - altura do retângulo.
rx - usado para contornar o canto do retângulo arredondado.
ry - usado para contornar o canto do retângulo arredondado.

Exemplo -

<rect 
x = "100" y = "30" 
width = "300" height = "100" 
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >

Como desenhar um círculo em SVG?

A tag 'circle' do SVG é usada para desenhar um círculo. A seguir estão os atributos comumente usados -

cx- coordenada do eixo x do centro do círculo. O padrão é 0.
cy- coordenada do eixo y do centro do círculo. O padrão é 0.
r - raio do círculo.

Exemplo -

<circle 
cx = "100" cy = "100" r = "50" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)" >

Como desenhar uma elipse em SVG?

A tag 'elipse' do SVG é usada para desenhar uma elipse. A seguir estão os atributos comumente usados -

cx- coordenada do eixo x do centro da elipse. O padrão é 0.
cy- coordenada do eixo y do centro da elipse. O padrão é 0.
rx - raio do eixo x da elipse.
ry - raio do eixo y da elipse.

Exemplo -

<ellipse 
cx = "100" cy = "100" 
rx = "90" ry = "50" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

Como desenhar uma linha em SVG?

A tag 'line' do SVG é usada para desenhar uma linha. A seguir estão os atributos comumente usados -

x1- coordenada do eixo x do ponto inicial. O padrão é 0.
y1- coordenada do eixo y do ponto inicial. O padrão é 0.
x2- coordenada do eixo x do ponto final. O padrão é 0.
y2- coordenada do eixo y do ponto final. O padrão é 0.

Exemplo -

<line 
x1 = "20" y1 = "20" 
x2 = "150" y2 = "150" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

Como desenhar um polígono de extremidade fechada em SVG?

A tag 'polígono' do SVG é usada para desenhar um polígono. A seguir está o atributo comumente usado -

pontos - Lista de pontos para formar um polígono.

Exemplo -

<polygon 
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

Como desenhar um polígono aberto em SVG?

A tag 'polyline' do SVG é usada para desenhar um polígono aberto. A seguir está o atributo comumente usado -

pontos - Lista de pontos para formar um polígono.

Exemplo -

<polyline 
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" 
stroke = "black" 
stroke-width = "3" 
fill = "none">

Como desenhar um caminho de fluxo livre em SVG?

A tag 'path' do SVG é usada para desenhar um caminho de fluxo livre. A seguir está o atributo comumente usado -

d - dados de caminho, geralmente um conjunto de comandos como moveto, lineto etc.

Exemplo -

<path 
d = "M 100 100 L 300 100 L 200 300 z" 
stroke = "black" 
stroke-width = "3" 
fill = "rgb(121,0,121)">

Qual comando do elemento de caminho move o cursor de um ponto para outro ponto?

O comando M do elemento do caminho move de um ponto para outro ponto.

Qual comando do elemento path cria uma linha?

O comando L do elemento de caminho cria uma linha.

Qual comando do elemento de caminho cria uma linha horizontal?

O comando H do elemento de caminho cria uma linha horizontal.

Qual comando do elemento de caminho cria uma linha vertical?

O comando V do elemento de caminho cria uma linha vertical.

Qual comando do elemento de caminho cria uma curva?

O comando C do elemento de caminho cria uma curva.

Qual comando do elemento de caminho cria uma curva suave?

O comando S do elemento de caminho cria uma curva suave.

Qual comando do elemento de caminho cria uma curva de Bézier quadrática

O comando Q do elemento de caminho cria uma curva de Bézier quadrática.

Qual comando do elemento de caminho cria uma curva de Bézier quadrática suave?

O comando T do elemento de caminho cria uma curva de Bézier quadrática suave.

Qual comando do elemento de caminho cria um arco elíptico?

Um comando do elemento de caminho cria um arco elíptico.

Qual comando do elemento de caminho fecha o caminho.

O comando Z do elemento de caminho fecha o caminho.

Quando os comandos do elemento Path seguem o caminho absoluto?

Quando os comandos estão em maiúsculas, eles representam o caminho absoluto. No caso de seus comandos em minúsculas serem usados, o caminho relativo é usado.