Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<svg viewBox="0 0 300 300">
  <defs>
    <circle id="c" cy="50" cx="50" r="50" />
    <symbol id="s" viewBox="0 0 100 100">
      <circle cy="50" cx="50" r="50" />
    </symbol>
  </defs>
  
  <!-- re-used circles, width/height have no effect -->
  <use xlink:href="#c" x="0" fill="green"
       width="50" height="50" />
  
  <use xlink:href="#c" x="100" fill="red"
       width="0" height="0" />
  
  <use xlink:href="#c" x="200" fill="blue"
       width="-50" height="-50" />
  
  <!-- re-used symbols, width/height scale -->
  
  <use xlink:href="#s" x="0" fill="green"
       y="100" width="50" height="50" />
  
  <use xlink:href="#s" x="100" fill="red"
       y="100" width="0" height="0" />
  
  <use xlink:href="#s" x="200" fill="blue"
       y="100" width="-50" height="-50" />
  
  
  
</body>
</html>
 
svg {
  min-height: 300px;
  width: 100%;
  max-height: 100vh;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers