Summary  
This chapter explains the difference between vector graphics—which use mathematical equations to define scalable shapes without quality loss—and raster graphics, which use fixed pixels and lose quality when scaled.  

General domain of usage  
Graphic design  

Existem dois tipos principais de formatos gráficos utilizados em mídia digital: **gráficos vetoriais** e **gráficos rasterizados**.

## Gráficos Vetoriais
Gráficos vetoriais são criados utilizando equações matemáticas baseadas em linhas e formas ao invés de pixels. Isso significa que os gráficos vetoriais podem ser redimensionados para cima ou para baixo sem perder qualidade, pois são independentes de resolução. Os formatos de arquivo vetorial padrão incluem **SVG**. Execute o exemplo a seguir e observe que não há diferença na qualidade da imagem, mesmo considerando tamanhos diferentes.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL3ZlY3RvcitncmFwaGljK2V4YW1wbGUiCiAgYWx0PSJtaWNyb3dhdmUiCiAgd2lkdGg9IjgwIgovPgo8aW1nCiAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdmVjdG9yK2dyYXBoaWMrZXhhbXBsZSIKICBhbHQ9Im1pY3Jvd2F2ZSIKICB3aWR0aD0iMTYwIgovPgo8aW1nCiAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdmVjdG9yK2dyYXBoaWMrZXhhbXBsZSIKICBhbHQ9Im1pY3Jvd2F2ZSIKICB3aWR0aD0iMzIwIgovPg==

## Gráficos Rasterizados
Gráficos rasterizados, por outro lado, são criados utilizando pixels e dependem da resolução. Isso significa que, ao aumentar o tamanho de um gráfico rasterizado, os pixels se tornam mais visíveis, resultando em perda de qualidade. Os formatos de arquivo raster mais comuns incluem **JPEG**, **PNG** e **GIF**. Vamos executar o exemplo a seguir. Com o aumento da largura, os pixels ficam mais evidentes e a qualidade da imagem diminui.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMva2V0dGxlLnBuZyIKICBhbHQ9ImtldHRsZSIKICB3aWR0aD0iNjQiCi8+CjxpbWcKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzQ2ODA1MmQtNmQ0Ny00Njc3LWIxZDEtZmIxMWFjZTcxOWIxL21lYWRpYS0lMjYtdGFibGVzL2tldHRsZS5wbmciCiAgYWx0PSJrZXR0bGUiCiAgd2lkdGg9IjEyOCIKLz4KPGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMva2V0dGxlLnBuZyIKICBhbHQ9ImtldHRsZSIKICB3aWR0aD0iMzYwIgovPg==

Para resumir, **gráficos vetoriais** são normalmente utilizados para logotipos, ilustrações e outros designs que exigem escalabilidade. Em contraste, **gráficos rasterizados** são usados para fotografias e outros designs que requerem um alto nível de detalhamento. No entanto, ambos os tipos de gráficos possuem suas vantagens e desvantagens.

Qual tipo de formato gráfico é mais indicado para logotipos e ilustrações que precisam ser redimensionados sem perder qualidade?

Qual tipo de formato gráfico é mais indicado para fotografias e designs que exigem um alto nível de detalhamento?

Gráficos rasterizados podem ser ampliados ou reduzidos sem perda de qualidade?

Aprenda os conceitos essenciais de HTML (HyperText Markup Language), a base do desenvolvimento web. Este curso para iniciantes aborda tags, atributos, elementos e a estruturação de páginas web. Adquira habilidades práticas na criação de títulos, parágrafos, listas, imagens, links, formulários e tabelas. Explore boas práticas, otimização e acessibilidade na web. Inicie sua jornada no desenvolvimento web com HTML.

Explore o funcionamento interno da web. Entenda como os dados trafegam pelas redes, descubra o papel dos protocolos e desvende os mistérios dos endereços IP e nomes de domínio. Obtenha uma compreensão geral de como navegadores e servidores se comunicam para entregar conteúdo web.

Descubra o poder das tags para estruturar o conteúdo, desde títulos e parágrafos até listas e tabelas. Aprenda como aprimorar os elementos com atributos.

O núcleo da estrutura de documentos HTML. Aprenda os componentes de um documento HTML, incluindo a declaração do doctype, head e body. Compreenda o propósito de cada elemento e como eles contribuem para a estrutura geral de uma página web.

Torne uma página web mais atraente com o uso de mídias como imagens, áudio e vídeo. Trabalhe com dados tabulares estruturados na forma de tabelas.

Explore a versatilidade dos formulários HTML. Aprenda a projetar formulários intuitivos e fáceis de usar aproveitando conceitos e técnicas essenciais. Descubra como os formulários possibilitam a interação do usuário e o envio de dados em sites.

Compreendendo Gráficos Vetoriais e Rasterizados

Gráficos Vetoriais

Gráficos Rasterizados

1. Qual tipo de formato gráfico é mais indicado para logotipos e ilustrações que precisam ser redimensionados sem perder qualidade?

2. Qual tipo de formato gráfico é mais indicado para fotografias e designs que exigem um alto nível de detalhamento?

3. Gráficos rasterizados podem ser ampliados ou reduzidos sem perda de qualidade?