Naiulat ang SVG Export

3 min read

I-port ang iyong mga animations bilang SVG files para sa web embeding at scalable graphics.

Kung Kailan Gagamitin ang SVG

Tamang - tama ang mga sVG kapag:

  • Mga Eksplikasyon sa mga website
  • Kailangan ang madaling pagkuha ng impormasyon
  • Mahalaga ang maliit na sukat ng talaksan
  • Kailangan mo ng maisasaayos na output ng vector

Paglikas Bilang SVG

  1. Click Export sa header
  2. Pumili Animatong SVG*
  3. Click Export*
  4. Ang talaksan ay agad na nag - download

Suporta sa Anisyon

Lubusang Sinuportahan ang Eksperimento

Pag - iisip SVG Output
Pulse <animateTransform type="scale">
Rotate <animateTransform type="rotate">
Pagtahimik <animateTransform type="translate">
Halaga <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Lumangoy <animateTransform type="translate">
Pagbangon <animateTransform type="translate">

Hindi Sinuportahang Eksperimento

Katangian Dahilan
" typewriter " Mga Pangangailangan sa JavaScript
Mga Epekto (Sparkle, Blast) Frame-based animations
Ulirang pag - ikot onFrame-based
Masalimuot na mga keyfram Limitadong suporta ng SMIL

Browser Support: Ang SVG animations ay gumagamit ng SMIL, na suportado sa Chrome, Firefox, Safari, at Edge. Ang ilang mas lumang browser ay maaaring magpakita ng static SVG.

Paggamit ng mga Website

Tuwirang Paglubog

<img src="animation.svg" alt="Animated graphic">

Inline SVG

Para sa higit pang pagkontrol, direktang may kasamang paste SVG code:

<svg viewBox="0 0 800 600">
  <!-- SVG content -->
</svg>

Larawan ng CSS

.element {
  background-image: url('animation.svg');
}

Kaugalian Pagkatapos ng Pag - uulat

Ang mga files ng SVG ay naka-aayos ng XML. Maaari mong gawin:

  • Buksan sa isang editor ng teksto
  • Pinagaganda ang mga kulay, laki, panahon
  • Idagdag ang CSS styling
  • Embed custom JavaScript

Kung Ano ang Naiulat

Elemento Ipinatapon Gaya ng
Teksto Mga elemento ng <text>
Hugis <path>, <circle>, atbp.
Pinagmulan <rect> na may palaman
Mga Pag - iisip SMIL <animate> tags

Pagdami ng Larawan

Ang mga talaksang SVG ay karaniwang napakaliit:

  • Simpleng animasyon: 2-10 KB
  • Masalimuot na eksena: 20-50 KB
  • Mas maliit sa GIF o MP4

Mga Tip

SVG Tips:

  • Gumamit ng SVG para sa web embed kung saan ang mga bagay na may kalidad
  • Iwasan ang mga epekto at animasyon ng makinilya
  • Pagsubok sa target na mga browser
  • Ang mga SVG ay maaaring isama sa CSS pagkatapos ng embudo

Pagkatisod Dahil sa Di - suportadong mga Ani

Kung ang iyong disenyo ay gumagamit ng hindi suportadong mga bahagi:

  1. Export as MP4 o GIF para sa masiglang bersyon
  2. Export bilang PNG para sa static fallback
  3. Gumamit ng <picture> elemento para sa progresibong pagpapainam