Cloudinary Blog

New Svelte Framework SDK for Cloudinary

New Svelte Framework SDK for Cloudinary

Back in April, Cloudinary made available on npm an alpha version of its components library for Svelte, a release that’s a wonderful addition to Cloudinary’s suite of client-side SDKs: React, Vue, and Angular. Those three front-end SDKs offer simple yet comprehensive optimization, transformation, and delivery capabilities for images and videos—features that you can tailor to automatically apply the best-fitting formats for all devices and browsers.

The Svelte SDK offers all those capabilities to Svelte developers through two robust components, Images and Videos.

Note
For details on Cloudinary’s next-generation developer SDKs, see this recent post.

The Image Component

With the Image component, you can display and transform images stored on Cloudinary, for example, by having Cloudinary generate an HTML <img> element whose source has been cropped as a circle and centered on someone’s face (see the photo below).

If you do not specify any image format, Cloudinary automatically applies the most suitable one for the browser. Here’s a code example:

Copy to clipboard
<Image
      cloud_name="demo"
      public_id="woman"
      transformation="{{
 width: 400,
 height: 400,
 gravity: 'face',
 radius: 'max',
 crop: 'crop' 
    }}"
/>

The generated HTML <img> element looks like this:

The Video Component

Similarly, the Video component enables you to display and transform videos stored on Cloudinary. For example, in automatically adding a poster image for a video, the Video component generates an HTML <video> element for a source that has been rotated by 20 degrees. If you don’t specify a video format, the component automatically adds fallback sources, as in this example:

Here’s the generated HTML <video> element:

Copy to clipboard
     <video
       controls="true"
       muted="true"
       poster="http://res.cloudinary.com/demo/video/upload/a_20/dog.jpg"
     >
       <source
         src="http://res.cloudinary.com/demo/video/upload/a_20/dog.webm"
         type="video/webm"
       />
       <source
         src="http://res.cloudinary.com/demo/video/upload/a_20/dog.mp4"
         type="video/mp4"
       />
       <source
         src="http://res.cloudinary.com/demo/video/upload/a_20/dog.ogv"
         type="video/ogg"
       />
     </video>

Upcoming Enhancements

Keep in mind that, even though the Svelte SDK components are fully functional, this is an alpha version only. That’s because our roadmap for the future encompasses major improvements to our core JavaScript library, which will affect all the client SDKs that rely on that library.

Here are the main upcoming enhancements:

  • A lighter modular bundle for importing used modules only.
  • New actions-based transformation capabilities for defining media transformations in a simpler manner.
  • An advanced Image component with built-in lazy loading and placeholder capabilities along with support for accessibility.

If you’re new to Cloudinary, to get started, just sign up for a free account, and do check out the new Svelte SDK on npm and its code repository on GitHub.

Recent Blog Posts

JavaScript File Upload

Uploading software files to the web, mobile, or desktop is as old as the web itself. Billions of files are moved around and downloaded on the Internet daily. Coincidentally, as the de facto language in which many apps are written, JavaScript is also as old as the web.

Read more
What’s New for Video in E-Commerce

With videos becoming more and more paramount for promoting online sales, we at Cloudinary Labs are building technology to help grow the business of e-commerce retailers. This series of blog posts delves into a few use cases that promise to boost retail revenue online across the patron’s browsing journey through the e-commerce site.

Read more
Securely Uploading Images to Cloudinary by Email

Despite United States founder Benjamin Franklin’s wisdom that three can keep a secret if two of them are dead, you as developers often need contributions from third parties for your project. However, in today’s digital world, security in software development is a predominant concern. With respect to management of rich media, it’d be ideal if those folks could upload images or videos to your Cloudinary account without having to log in.

Read more
ImageCon 2020: A Digital Experience

Despite our disappointment at the cancellation of our fourth annual ImageCon conference in late April due to the pandemic, we forged on and are thrilled to announce a digital version of ImageCon on Monday July 27 through the 30th, an excellent forum for learning from our customers, partners, and colleagues. The new digital format will deliver much of the same Visual Web-related content planned for April along with new additions, featuring five interactive sessions by renowned experts in the media sector. Each session will be about 30 minutes long, during which you can ask the speakers questions live and “get on stage.” Also, you can watch the sessions on demand afterwards.

Read more
Good Reads Meet Visual Tools at Bloomsbury

Most might know Bloomsbury Publishing as the publisher of the Harry Potter series. What you might not know is that the publishing house also has a vibrant academic division that offers digital reproductions of encyclopedias, manuscripts and museum collections for use by university libraries and researchers. Seeking a way to manipulate and serve high-resolution images, combined with security that prevented anyone other than library patrons and paid users to access the content, Bloomsbury discovered Cloudinary’s digital asset management (DAM) solution.

Read more