عناصر Picture وSVG في لغة HTMLHTML Picture and SVG Elements

<picture>
  <source media="(min-width: 800px)"
          srcset="images/examples/workspace-wide.webp">
  <source media="(min-width: 480px)"
          srcset="images/examples/workspace-tablet.webp">
  <img src="images/examples/workspace-mobile.webp"
       alt="Modern developer workstation">
</picture>

<picture>
  <!-- Wide panoramic studio view for larger screens -->
  <source media="(min-width: 640px)"
          srcset="images/examples/workspace-wide.webp">
  <!-- Focused square laptop crop for mobile -->
  <img src="images/examples/workspace-mobile.webp"
       alt="Developer desk workstation">
</picture>

<picture>
  <!-- Ultra-efficient AVIF for modern engines -->
  <source type="image/avif"
          srcset="images/examples/coastal-sunset.avif">
  <!-- High-compression WebP fallback -->
  <source type="image/webp"
          srcset="images/examples/coastal-sunset.webp">
  <!-- Universal legacy JPEG fallback -->
  <img src="images/examples/coastal-sunset.jpg"
       alt="Sunset over coastal cliffs" width="640" height="360">
</picture>

<svg width="120" height="40" viewBox="0 0 120 40">
  <rect width="120" height="40" rx="8"
        fill="#7750b2"/>
  <text x="60" y="25" text-anchor="middle"
        fill="#ffffff" font-size="14">
    CloseTag
  </text>
</svg>

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- Rounded rectangle -->
  <rect x="10" y="10" width="80" height="80"
        rx="8" fill="#2563eb"/>
  <!-- Circle with center and radius -->
  <circle cx="150" cy="50" r="40"
          fill="#0f766e"/>
</svg>

<svg width="48" height="48" viewBox="0 0 24 24">
  <title>Shield Protection</title>
  <desc>An active security shield</desc>
  <path d="M12 2L3 7v6c0 5 9 9 9 9s9-4 9-9V7l-9-5z"
        fill="currentColor"/>
</svg>

<!-- Safe external SVG rendered via inert <img> -->
<img src="/images/examples/shield-icon.svg"
     alt="Sanitized security shield emblem"
     width="96" height="96">
<!-- Inert img mode isolates untrusted SVG files -->