SDKs overview

Sirv primarily offers a REST API for asset management and configuration, allowing developers to programmatically interact with their Sirv accounts. While Sirv focuses on direct integration via its API and specialized plugins for e-commerce platforms, it also provides specific official JavaScript libraries for client-side rendering of dynamic imagery and 360-degree spins. These libraries are designed to simplify the implementation of Sirv's core features, such as responsive imaging, image lazy loading, and interactive product views.

The primary use cases for Sirv's SDKs and libraries revolve around optimizing media delivery for web applications. This includes ensuring images are served in the correct format and size for different devices and network conditions, implementing interactive image viewers, and embedding 360-degree product spins without extensive manual configuration. Developers can use these tools to automate image processing workflows and enhance front-end user experiences related to visual content.

Official SDKs by language

Sirv maintains official client-side libraries primarily in JavaScript to support its interactive media features. These libraries are integral for rendering dynamic images, responsive image sets, and 360-degree product spins directly within web browsers. The focus is on front-end integration rather than server-side asset manipulation, which is typically handled through the Sirv REST API or direct uploads.

The following table outlines the key official client-side libraries provided by Sirv:

Language Package/Library Description Maturity
JavaScript Sirv JS (Global) A core JavaScript library for embedding dynamic images, responsive images, and 360-degree product spins. It handles image loading, resizing, and interactivity. Stable
JavaScript Sirv Viewer Specialized library for displaying 360-degree product spins and zoomable images, often integrated with Sirv JS. Stable
JavaScript Sirv Media Viewer A more comprehensive viewer for various media types, including images, videos, and spins. Stable

Installation

Integrating Sirv's client-side libraries into a web project typically involves including a JavaScript file in the HTML. For server-side interactions, most developers utilize standard HTTP client libraries available in their chosen programming language to interact with the Sirv REST API documentation.

Client-Side JavaScript Installation

To use Sirv's client-side features, such as dynamic imaging and 360-degree spins, the primary Sirv JavaScript library is loaded directly into the web page. This can be done via a <script> tag, typically placed near the end of the <body> section for optimal page load performance, as recommended by general web development practices for efficient JavaScript loading.

Via CDN (recommended for quick setup):

<script src="https://scripts.sirv.com/sirv.js"></script>

This script tag loads the main Sirv library, which then allows for the use of Sirv attributes on HTML elements to define dynamic images or embed viewers. For specific components like the Sirv Viewer for 360 spins, additional scripts might be required as detailed in the Sirv Viewer options documentation.

Via npm (for modern JavaScript projects):

While the primary Sirv.js library is often loaded via CDN for simplicity, modern JavaScript projects might prefer package managers. Sirv also provides components available through npm for more modular integration.

npm install @sirv/sirv-viewer

After installation, components can be imported into your JavaScript modules:

import { SirvViewer } from '@sirv/sirv-viewer';

// Initialize the viewer
const viewer = new SirvViewer({
  element: document.getElementById('my-spin-container'),
  images: [
    // List of image URLs for the spin
  ]
});

Quickstart example

This quickstart demonstrates how to embed a responsive, dynamic image using the Sirv JavaScript library. The example assumes the Sirv JS library has been loaded via CDN as shown in the installation section.

Embedding a dynamic image

To display an image that is automatically optimized and resized by Sirv, you typically use an <img> tag with a Sirv URL in its src attribute, or use custom data- attributes for more advanced configurations. Sirv processes the image on the fly based on parameters in the URL or attributes defined in the HTML.

HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sirv Dynamic Image Quickstart</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .image-container {
            max-width: 600px;
            margin: 0 auto;
            border: 1px solid #eee;
            padding: 10px;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Sirv Dynamic Image Example</h1>
    
    <div class="image-container">
        <!-- Load Sirv JS -->
        <script src="https://scripts.sirv.com/sirv.js"></script>

        <!-- Display a dynamic image -->
        <img
            class="Sirv"
            data-src="https://demo.sirv.com/stuff/productA.jpg?scale.width=1000"
            alt="Dynamic Product Image"
        />
        <p>This image is served by Sirv and is dynamically resized. The `data-src` attribute specifies the base image and a width parameter.</p>
    </div>

    <h2>Sirv 360-degree Spin Example</h2>
    <div class="image-container">
        <!-- A container for the 360 spin -->
        <div
            class="Sirv-spin"
            data-src="https://demo.sirv.com/chair/chair.spin"
            data-options="zoom: true; autostart: load; quality: 80"
            style="width: 100%; height: 400px;"
        ></div>
        <p>This is an interactive 360-degree product spin. The <code>data-src</code> points to a Sirv spin file.</p>
    </div>

</body>
</html>

Explanation:

  • The <script src="https://scripts.sirv.com/sirv.js"></script> tag loads the main Sirv JavaScript library.
  • For the dynamic image, the <img class="Sirv"> element tells Sirv to process this image. The data-src attribute specifies the Sirv URL for the image, including a dynamic parameter (?scale.width=1000) that instructs Sirv to scale the image to a maximum width of 1000 pixels. Sirv will also handle optimization (e.g., converting to WebP) based on browser support.
  • For the 360-degree spin, a <div class="Sirv-spin"> element is used. The data-src attribute points to a Sirv spin file (.spin extension). The data-options attribute allows for configuration of the spin viewer, such as enabling zoom and auto-starting the spin on load.
  • The Sirv JS library automatically detects these elements, fetches the optimized images or spin data from Sirv, and renders them appropriately on the page.

Further customization and advanced features, such as lazy loading, responsive image sets, and various viewer options, are available through additional data- attributes and JavaScript configurations described in the Sirv JS options documentation.

Community libraries

Sirv's primary focus is on providing a robust API and official client-side libraries for its specific media optimization and delivery features. As a result, the ecosystem of third-party or community-contributed SDKs and libraries built directly on top of the Sirv API is less extensive compared to platforms with broader API functionalities. Developers typically interact with the Sirv REST API using standard HTTP client libraries available in their programming language of choice, such as requests in Python or fetch in JavaScript (as detailed in MDN Web Docs on Fetch API), rather than relying on a custom-built, community-driven SDK.

However, Sirv does offer official plugins and integrations for popular e-commerce platforms, which can be considered a form of specialized library for those environments. These integrations simplify the process of connecting a Sirv account with platforms like:

  • WordPress/WooCommerce: A plugin available through the WordPress plugin directory that integrates Sirv for image optimization and 360-degree spins on e-commerce sites.
  • Magento: An extension designed to replace Magento's default image handling with Sirv's dynamic imaging capabilities.
  • Shopify: While not a traditional SDK, Sirv offers a streamlined setup for Shopify stores to use Sirv for product imagery.

These platform-specific integrations are developed and maintained officially by Sirv to ensure compatibility and leverage the platform's native features. For custom integrations or server-side automation, developers are directed to use the Sirv REST API directly with generic HTTP clients.